flex布局

常见属性

1. display：定义一个元素是否为弹性容器。

   • display: flex：将元素设置为弹性容器。
   • display: inline-flex：将元素设置为内联弹性容器。

2. flex-direction：指定弹性容器的主轴方向。

   • flex-direction: row：主轴水平，项目从左到右排列。
   • flex-direction: row-reverse：主轴水平，项目从右到左排列。
   • flex-direction: column：主轴垂直，项目从上到下排列。
   • flex-direction: column-reverse：主轴垂直，项目从下到上排列。

3. flex-wrap：定义项目是否允许自动换行。

   • flex-wrap: nowrap：不允许自动换行，项目在一行内排列。
   • flex-wrap: wrap：允许自动换行，项目可以换到下一行。
   • flex-wrap: wrap-reverse：允许自动换行，项目可以换到下一行，但从下到上排列。

4. justify-content：控制项目在主轴上的对齐方式。

   • justify-content: flex-start：项目在主轴起点对齐。
   • justify-content: flex-end：项目在主轴终点对齐。
   • justify-content: center：项目在主轴居中对齐。
   • justify-content: space-between：项目在主轴上平均分布，首尾不留空白。
   • justify-content: space-around：项目在主轴上平均分布，首尾留有相等的空白。

5. align-items：控制项目在交叉轴上的对齐方式。

   • align-items: flex-start：项目在交叉轴起点对齐。
   • align-items: flex-end：项目在交叉轴终点对齐。
   • align-items: center：项目在交叉轴居中对齐。
   • align-items: baseline：项目在基线对齐。
   • align-items: stretch：项目在交叉轴上拉伸以填充整个容器。

6. align-content：控制多行项目在交叉轴上的对齐方式（仅当存在多行项目时才起作用）。

   • align-content: flex-start：多行项目在交叉轴起点对齐。
   • align-content: flex-end：多行项目在交叉轴终点对齐。
   • align-content: center：多行项目在交叉轴居中对齐。
   • align-content: space-between：多行项目在交叉轴上平均分布，首尾不留空白。
   • align-content: space-around：多行项目在交叉轴上平均分布，首尾留有相等的空白。

7. flex：控制项目在分配剩余空间时的伸缩能力。

   • flex: none：项目不伸缩，不占用剩余空间。
   • flex: [positive number]：项目按照比例分配剩余空间，数值越大分得越多。

8. order：控制项目的显示顺序，数值越小越靠前。

9. 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;
}