章
目
录
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等核心属性，我们可以轻松实现水平和垂直居中、动态调整子项大小，还能创建出适应各种屏幕尺寸的响应式布局。
