CSS Flex 弹性布局使用详解

文
章
目
录

• 一、Flex布局是什么？
• 二、Flex容器和子项的设置
• 三、掌控主轴方向（flex-direction）
• 四、调整主轴对齐方式（justify-content）
• 五、管理交叉轴对齐（align-items）
• 六、实现多行换行（flex-wrap）
• 七、控制伸缩比例（flex-grow、flex-shrink、flex-basis）
• 八、复杂布局实战示例
• 九、总结

CSS Flex布局，也就是弹性盒模型布局，为开发者们提供了一种强大且灵活的布局方案。接下来，咱们就深入了解一下这个Flex布局。

一、Flex布局是什么？

CSS Flexbox是一种高效的网页布局技术。简单来说，它能够让容器里的元素按照我们设定的规则，在水平或垂直方向上进行排列，并且还能根据不同的屏幕尺寸自动调整布局，让网页在各种设备上都能有良好的显示效果。和CSS Grid主要用于二维布局不同，Flexbox更擅长构建一维布局，也就是元素主要沿着一个轴（主轴）来排列。

二、Flex容器和子项的设置

想要使用Flex布局，首先得把父元素设置为Flex容器。怎么做呢？很简单，在CSS样式里给父元素加上display: flex;这个属性，这样它就变成Flex容器啦。而这个容器里面的所有子元素，就都成为了Flex子项，这些子项就能使用Flex布局的各种特性了。

/* 定义一个Flex容器，设置背景颜色和内边距 */
.container {
  display: flex;
  background-color: #f4f4f4;
  padding: 10px;
}
/* 定义Flex子项的样式，包括背景颜色、文字颜色、内边距和外边距 */
.item {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  margin: 5px;
}

<!-- 在HTML中创建一个Flex容器，并添加几个Flex子项 -->
<div class=\"container\">
  <div class=\"item\">1</div>
  <div class=\"item\">2</div>
  <div class=\"item\">3</div>
</div>

三、掌控主轴方向（flex-direction）

flex-direction属性主要用来决定主轴的方向，而主轴方向又直接影响着Flex子项的排列方式。它有几个常见的值：

• row（默认值）：子项会从左到右横向排列。
• row-reverse：子项从右到左横向排列，就像是把row的顺序反过来。
• column：子项从上到下纵向排列。
• column-reverse：子项从下到上纵向排列，是column的反向排列。

/* 设置Flex容器的主轴方向，这里以row为例，也可替换为其他值 */
.container {
  display: flex;
  flex-direction: row; 
}

四、调整主轴对齐方式（justify-content）

justify-content属性用于控制Flex子项在主轴上的对齐方式，具体有以下几种：

• flex-start（默认值）：在横向主轴时，子项靠左排列；在纵向主轴时，子项靠上排列。
• flex-end：横向时子项靠右，纵向时子项靠下。
• center：子项在主轴上居中显示。
• space-between：首尾子项会紧贴容器边缘，中间的子项则平均分布剩余空间。
• space-around：每个子项的两侧都会有相等的间距。
• space-evenly：所有子项之间的间距完全相等。

/* 调整Flex子项在主轴上的对齐方式，这里以center为例，可尝试其他值 */
.container {
  display: flex;
  justify-content: center; 
}

五、管理交叉轴对齐（align-items）

align-items属性负责控制Flex子项在交叉轴（与主轴垂直的轴）上的对齐方式：

• stretch（默认值）：子项会拉伸以填充容器的高度。
• flex-start：子项从交叉轴的起点开始对齐。
• flex-end：子项从交叉轴的终点对齐。
• center：子项在交叉轴上居中对齐。
• baseline：子项的文本基线会对齐。

/* 设置Flex子项在交叉轴上的对齐方式，这里以center为例，可尝试其他值 */
.container {
  display: flex;
  align-items: center; 
}

六、实现多行换行（flex-wrap）

默认情况下，Flex布局会尽量把所有子项都放在同一行。但有时候，我们希望子项在容器空间不足时能够自动换行，这就用到了flex-wrap属性：

• nowrap（默认值）：子项不换行，会尽量压缩子项宽度以适应一行。
• wrap：子项在容器满了之后自动换行。
• wrap-reverse：子项换行，并且换行后的排列顺序是反转的。

/* 设置Flex容器的换行方式，这里以wrap为例 */
.container {
  display: flex;
  flex-wrap: wrap;
}

七、控制伸缩比例（flex-grow、flex-shrink、flex-basis）

通过flex相关的属性，我们可以精确控制Flex子项占据的空间比例：

• flex-grow：用来控制子项如何扩展占据剩余空间，默认值是0，表示不扩展。比如，设置为1，表示子项会按比例扩展去占据剩余空间。如果多个子项都设置了flex-grow，它们会按照比例分配剩余空间。例如：

.item:nth-child(1) { flex-grow: 2; } /* 这个子项占2份 */
.item:nth-child(2) { flex-grow: 1; } /* 这个子项占1份 */
.item:nth-child(3) { flex-grow: 1; } /* 这个子项占1份 */

• flex-shrink：控制子项在空间不足时的收缩情况，默认值是1，表示允许收缩。
• flex-basis：用于设定子项的初始大小，可以是auto、具体的像素值（如px）或者百分比。

/* 让所有Flex子项平均分配剩余空间 */
.item {
  flex-grow: 1; 
}

八、复杂布局实战示例

结合前面提到的这些属性，我们可以创建出复杂又实用的响应式布局。下面这段代码就是一个示例：

/* 定义一个Flex容器，设置换行、主轴对齐、交叉轴对齐、高度和背景颜色 */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background-color: lightgray;
}
/* 定义Flex子项的样式，包括伸缩比例、最小宽度、文本对齐、内边距、背景颜色、文字颜色和外边距 */
.item {
  flex: 1;
  min-width: 100px;
  text-align: center;
  padding: 20px;
  background-color: steelblue;
  color: white;
  margin: 5px;
}

<!-- 在HTML中创建布局容器和子项 -->
<div class=\"container\">
  <div class=\"item\">A</div>
  <div class=\"item\">B</div>
  <div class=\"item\">C</div>
</div>

在这个示例中，Flex容器里的子项会根据设置自动换行，并且在不同屏幕尺寸下都能保持良好的布局效果。

九、总结

CSS Flex布局功能强大，通过flex-direction、justify-content、align-items、flex-grow等核心属性，我们可以轻松实现水平和垂直居中、动态调整子项大小，还能创建出适应各种屏幕尺寸的响应式布局。