常见属性
-
display：定义一个元素是否为弹性容器。
display: flex：将元素设置为弹性容器。display: inline-flex：将元素设置为内联弹性容器。
-
flex-direction：指定弹性容器的主轴方向。
flex-direction: row：主轴水平，项目从左到右排列。flex-direction: row-reverse：主轴水平，项目从右到左排列。flex-direction: column：主轴垂直，项目从上到下排列。flex-direction: column-reverse：主轴垂直，项目从下到上排列。
-
flex-wrap：定义项目是否允许自动换行。
flex-wrap: nowrap：不允许自动换行，项目在一行内排列。flex-wrap: wrap：允许自动换行，项目可以换到下一行。flex-wrap: wrap-reverse：允许自动换行，项目可以换到下一行，但从下到上排列。
-
justify-content：控制项目在主轴上的对齐方式。
justify-content: flex-start：项目在主轴起点对齐。justify-content: flex-end：项目在主轴终点对齐。justify-content: center：项目在主轴居中对齐。justify-content: space-between：项目在主轴上平均分布，首尾不留空白。justify-content: space-around：项目在主轴上平均分布，首尾留有相等的空白。
-
align-items：控制项目在交叉轴上的对齐方式。
align-items: flex-start：项目在交叉轴起点对齐。align-items: flex-end：项目在交叉轴终点对齐。align-items: center：项目在交叉轴居中对齐。align-items: baseline：项目在基线对齐。align-items: stretch：项目在交叉轴上拉伸以填充整个容器。
-
align-content：控制多行项目在交叉轴上的对齐方式（仅当存在多行项目时才起作用）。
align-content: flex-start：多行项目在交叉轴起点对齐。align-content: flex-end：多行项目在交叉轴终点对齐。align-content: center：多行项目在交叉轴居中对齐。align-content: space-between：多行项目在交叉轴上平均分布，首尾不留空白。align-content: space-around：多行项目在交叉轴上平均分布，首尾留有相等的空白。
-
flex：控制项目在分配剩余空间时的伸缩能力。
flex: none：项目不伸缩，不占用剩余空间。flex: [positive number]：项目按照比例分配剩余空间，数值越大分得越多。
-
order：控制项目的显示顺序，数值越小越靠前。
-
align-self：覆盖容器的align-items属性，控制单个项目在交叉轴上的对齐方式。
属性区别
| 属性 |
描述 |
主要取值 |
主轴 |
交叉轴 |
display |
定义元素是否为弹性容器 |
flex、inline-flex |
是 |
是 |
flex-direction |
指定主轴方向 |
row、row-reverse、column、column-reverse |
是 |
否 |
flex-wrap |
控制项目是否允许自动换行 |
nowrap、wrap、wrap-reverse |
是 |
否 |
justify-content |
控制项目在主轴上的对齐方式 |
flex-start、flex-end、center、space-between、space-around |
是 |
否 |
align-items |
控制项目在交叉轴上的对齐方式 |
flex-start、flex-end、center、baseline、stretch |
否 |
是 |
align-content |
控制多行项目在交叉轴上的对齐方式 |
flex-start、flex-end、center、space-between、space-around |
否 |
是 |
flex |
控制项目在分配剩余空间时的伸缩能力 |
none、[positive number] |
是 |
否 |
order |
控制项目的显示顺序 |
整数值 |
是 |
否 |
align-self |
控制单个项目在交叉轴上的对齐方式 |
auto、flex-start、flex-end、center、baseline、stretch |
否 |
是 |
flex布局例子
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
align-content: space-between;
height: 300px;
border: 2px solid #333;
background-color: #f0f0f0;
}
.item {
flex: 1;
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 20px;
background-color: #3498db;
color: #fff;
border: 2px solid #ccc;
}
.item1 {
order: 3;
align-self: flex-end;
}
.item2 {
order: 2;
flex: 2;
background-color: #e74c3c;
}
.item3 {
order: 1;
flex: 1;
background-color: #27ae60;
}
.item4 {
flex: 0;
background-color: #f1c40f;
}
.item5 {
align-self: center;
background-color: #9b59b6;
}