网站首页 > 技术文章正文

掌握Flex布局的这几个常用属性，搞定弹性布局不在话下

hmc789 2024-11-24 16:44:20 技术文章 2 ℃

1.使用display:flex声明一个Flex布局，这个容器称为Flex容器，其包含的子元素称为Flex项目

在Flex容器中有几个核心术语

容器: 使用display:flex属性元素
项目: 容器的"子元素"
主轴: 项目排列的轴线
交叉轴: 与主轴垂直的轴线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex快速实现水平居中和垂直居中</title>
    <style>
        .box {
            width: 15em;
            height: 15em;
            background-color: lightgreen;
            /* 声明一个flex布局 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box .item {
            width: 5em;
            height: 5em;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

效果图：

2.容器属性

属性描述flex-flow主轴方向与换行方式justify-content项目在主轴上的对齐方式align-items项目在交叉轴上的对齐方式align-content项目在多行容器中的对齐方式

创建一个盒模型，声明为flex布局：

html代码

<div class="box">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
</div>

css样式：

<style>
* {
    box-sizing: border-box;
}
.box {
    display: flex;
    height: 15em;
    border: 1px solid #000;
    padding: 1em;
    margin: 1em;
}

.box .item {
    width: 5em;
    height: 5em;
    background-color: lightcyan;
    border: 1px solid #000000;
}
</style>

效果图：

2.1 弹性项目在主轴上的排列方式

弹性项目在主轴上的排列方式有两种：

1.单行容器

flex-direction: row;

针对上面的样式，可以给.box一个样式：

flex-direction: row;
flex-wrap: nowrap;

以上两行样式的意思是，有一个主轴沿水平方向的flex布局，并且它下面的项目水平排列不换行。效果图就是上述样式，因为默认的是水平排列不换行，这两行样式可以简写成一行：

flex-flow: row nowrap;

2.多行容器

flex-direction: column;
flex-wrap: nowrap;

效果如图：

此时的主轴方向变成垂直方向了，水平方向变成了交叉轴，因此每个项目会沿着主轴垂直排列，如果设置了允许换行：

flex-direction: column;
flex-wrap: wrap;

在一列排不下的时候，会自动换行到第二列，效果如图：

上面两行样式代码一样可以简写成：

flex-flow: column nowrap;

2.2 弹性项目在单行容器的对齐方式

html：

<div class="box">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
</div>

css样式：

<style>
* {
    box-sizing: border-box;
}
.box {
    display: flex;
    height: 15em;
    border: 1px solid #000;
    padding: 1em;
    margin: 1em;
}
.box .item {
    width: 5em;
    background-color: lightcyan;
    border: 1px solid #000000;
}
</style>

效果图：

设置项目在单行容器主轴上的对齐有个前提：主轴上必须有剩余空间。

项目在主轴上的对齐方案：
1.将所有项目视为一个整体，在项目组两边进行分配

左对齐 justify-content: flex-start;
居中 justify-content: center;
右对齐 justify-content: flex-end;

这三个属性的效果如下图：

2.将项目视为一个个独立的个体，在项目之间进行分配

分散对齐 justify-content: space-around; 每个左右两边的间距相等
两端对齐 justify-content: space-between; 首尾项目顶格，每个项目之间的间距相等
平均对齐 justify-content: space-evenly; 每个项目之间的间距相等

这三个属性的效果如下图：

2.2 弹性项目在交叉轴上的排列方式

属性描述stretch默认效果，拉伸到容器的高度flex-start弹性项目沿交叉轴顶部对齐center弹性项目在容器里沿交叉轴居中flex-end弹性项目在交叉轴底部对齐。

/* 交叉轴的对齐方案 */
.box {
    align-items: stretch;
    align-items: flex-start;
    align-items: center;
    align-items: flex-end;
}

效果图：

注意：有一点值得注意的是，如果使用stretch，项目上不要设置高度，否则无法拉伸子项目的高度。

3.项目属性

属性描述flex项目的缩放比例与基准宽度align-self单个项目在交叉轴上的对齐方式order项目在主轴上排列顺序

现有如下的弹性盒模型：

html：

<div class="box">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
</div>

css样式：

<style>
* {
    box-sizing: border-box;
}
.box {
    display: flex;
    height: 15em;
    border: 1px solid #000;
    padding: 1em;
    margin: 1em;
}

.box .item {
    width: 5em;
    background-color: lightcyan;
    border: 1px solid #000000;
}
</style>

效果图：

flex: 放大因子收缩因子项目在主轴上的基准宽度
flex: flex-grow flex-shrink flex-basis;

现在在.item项目上加上一个属性flex，有如下样式：

flex: 0 1 auto;

该值是默认效果，效果与上面的效果图一致，还可以写成：

flex: inherit;

允许放大或收缩，禁止放大或收缩

/* 允许放大或收缩 */
flex: 1 1 auto;
/* 禁止放大或收缩 */
flex: 0 0 auto;

效果图：

禁止放大或收缩还可以写成：

flex: none;

如果只有一个参数，省略后面两个参数，表示放大因子，例如：

flex: 1;

上述的代码等价于：

flex: 1 1 auto;

上一篇：用 CSS Grid 布局制作一个响应式柱状图
下一篇：深入浅出超好用的 CSS 阴影技巧

网站首页 > 技术文章 正文