CSS 弹性布局Flex详细讲解(Flex 属性详解、场景分析)

CSS 弹性布局（Flex）是一种能够使开发者更轻松地实现响应式设计效果的布局方式。本文将详细讲解 Flex 属性的所有细节，帮助开发者更加深入地理解弹性布局的原理和使用场景。

一、Flex 弹性布局的原理

Flex 布局通过对父元素和子元素进行属性的控制，实现了自适应、自动调整、自动填充的效果，可以让网页在各种屏幕尺寸、不同设备上呈现出最合适的样式。

要在 CSS 中使用 Flex 弹性布局，需要设置父元素的 display 属性为 flex，并且在父元素中设置各种属性对子元素进行样式控制。

二、Flex 属性的详细讲解

Flex 布局有7个属性，控制着元素在 Flex 容器中的位置、尺寸和顺序。

1. flex-direction

控制 Flex 容器中 Flex 元素的排列方向。共有4个值：

• row （默认值）：沿着水平方向从左到右排列；
• row-reverse：沿着水平方向从右到左排列；
• column：沿着竖直方向从上到下排列；
• column-reverse：沿着竖直方向从下到上排列；

示例代码：

.container {
  display: flex;
  flex-direction: row;
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.container-vertical {
  display: flex;
  flex-direction: column;
}

.container-vertical-reverse {
  display: flex;
  flex-direction: column-reverse;
}

2. justify-content

控制 Flex 容器中 Flex 元素在 flex-direction 方向上的对齐方式。共有6个值：

• flex-start（默认值）：元素在容器的开头对齐；
• flex-end：元素在容器的结尾对齐；
• center：元素在容器的中心对齐；
• space-between：元素在容器中平均分布；
• space-around：元素在容器中平均分布且两端间隔相等；
• space-evenly：元素在容器中等间距排列。

示例代码：

.container-start {
  display: flex;
  justify-content: flex-start;
}

.container-end {
  display: flex;
  justify-content: flex-end;
}

.container-center {
  display: flex;
  justify-content: center;
}

.container-space-between {
  display: flex;
  justify-content: space-between;
}

.container-space-around {
  display: flex;
  justify-content: space-around;
}

.container-space-evenly {
  display: flex;
  justify-content: space-evenly;
}

3. align-items

控制 Flex 容器中 Flex 元素在非 flex-direction 方向上的对齐方式。共有6个值：

• stretch（默认值）：元素会被拉伸以适应容器；
• flex-start：元素在容器的开头对齐；
• flex-end：元素在容器的结尾对齐；
• center：元素在容器的中心对齐；
• baseline：元素在容器中以基线对齐；
• self-start：元素本身在容器的开头对齐；
• self-end：元素本身在容器的结尾对齐；
• start：元素在容器的开头对齐；

示例代码：

.container-stretch {
  display: flex;
  align-items: stretch;
}

.container-start {
  display: flex;
  align-items: flex-start;
}

.container-end {
  display: flex;
  align-items: flex-end;
}

.container-center {
  display: flex;
  align-items: center;
}

.container-baseline {
  display: flex;
  align-items: baseline;
}

4. align-content

控制多行 Flex 元素在交叉轴上的对齐方式。共有6个值：

• stretch（默认值）：多行 Flex 元素平均分布且被拉伸以适应空间；
• flex-start：多行 Flex 元素在容器的交叉轴开始对齐；
• flex-end：多行 Flex 元素在容器的交叉轴结尾对齐；
• center：多行 Flex 元素在容器的交叉轴中心对齐；
• space-between：多行 Flex 元素在交叉轴方向平均分布；
• space-around：多行 Flex 元素在交叉轴方向平均分布且两端间隔相等。

示例代码：

.container-stretch {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

.container-start {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.container-end {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

.container-center {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.container-space-between {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.container-space-around {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

5. flex-wrap

控制子元素是否换行。共有3个值：

• nowrap（默认值）：不换行；
• wrap：向下（在 row 时）或向右（在 column 时）换行；
• wrap-reverse：向上（在 row 时）或向左（在 column 时）换行。

示例代码：

.container-no-wrap {
  display: flex;
  flex-wrap: nowrap;
}

.container-wrap {
  display: flex;
  flex-wrap: wrap;
}

.container-wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;
}

6. align-self

控制单个子元素在非 flex-direction 方向上的对齐方式。共有6个值：

• stretch（默认值）：自动拉伸以适应容器；
• flex-start：放置在容器的开头；
• flex-end：放置在容器的结尾；
• center：放置在容器的中心；
• baseline：放置在容器的基线上；
• self-start：本身在容器的开头；
• self-end：本身在容器的结尾。

示例代码：

.item-stretch {
  align-self: stretch;
}

.item-start {
  align-self: flex-start;
}

.item-end {
  align-self: flex-end;
}

.item-center {
  align-self: center;
}

.item-baseline {
  align-self: baseline;
}

7. flex

flex 是一个复合属性，用于同时设置 flex-grow、flex-shrink 和 flex-basis。

• flex-grow 指定弹性元素多余空间的分配比例。如果所有子元素的 flex-grow 值相等，则每个子元素都会分配相同的空间。否则，值较大的子元素会分配更多的空间。
• flex-shrink 指定弹性元素在空间不足时的收缩比例。
• flex-basis 指定弹性元素的初始大小，可以通过这个属性将元素压缩或拉伸到指定的尺寸。

示例代码：

.item {
  flex: 1 0 auto; /* 默认值：flex-grow: 1; flex-shrink: 0; flex-basis: auto; */
}

.item-1 {
  flex: 1; /* 等价于 flex: 1 1 0%; */
}

.item-2 {
  flex: 2; /* 等价于 flex: 2 1 0%; */
}

三、Flex 弹性布局的应用场景

1. 实现水平垂直居中

Flex 布局可以很简单地实现水平垂直居中的效果，只需要设置父元素的 display 为 flex，并且在父元素中设置 justify-content: center; align-items: center; 即可。

示例代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 实现等比例图片布局

使用 Flex 布局可以很方便地实现等比例的图片展示布局，只需要设置父元素为 Flex 容器，并且设置子元素为 flex: 1; 即可。

示例代码：

.container {
  display: flex;
}

.item {
  flex: 1;
}

img {
  width: 100%;
  height: auto;
}

四、总结

本文对 Flex 弹性布局进行了详细的讲解，包括 Flex 属性的功能和使用场景。在实际开发中，开发者可以根据页面需求和布局特点选择不同的属性进行组合使用，从而实现更加灵活和合理的布局效果。