CSS Flexbox 布局 入门教程
在现代网页设计中，实现灵活、响应式的布局是至关重要的。传统的布局方法，如使用 float、inline-block 或 table，在面对复杂或者需要弹性伸缩的布局需求时，往往会显得力不从心，代码冗余且维护困难。
这时，CSS Flexbox (弹性盒子布局) 应运而生。Flexbox 提供了一种更高效、更灵活的方式来对容器中的项目进行排列、对齐和分配空间，特别适用于一维布局（即沿着一条轴线排列项目）。掌握 Flexbox，能够极大地简化你的布局工作，让页面元素的排列更加得心应手。
本教程将带你从零开始认识 Flexbox，深入了解其核心概念和常用属性。
1. Flexbox 的核心概念：容器与项目
Flexbox 布局涉及到两个核心概念：
- Flex 容器 (Flex Container): 开启 Flexbox 布局的父元素。你需要给这个父元素设置
display: flex;或display: inline-flex;。 - Flex 项目 (Flex Items): Flex 容器的所有直接子元素都会成为 Flex 项目。
记住这一点至关重要：Flexbox 的大部分属性是应用于容器的，而少数属性是应用于项目的。
当一个元素成为 Flex 容器后，其直接子元素的布局就会受 Flexbox 控制，不再遵循常规的块级或行内布局。
“`css
.container {
display: flex; / 将此元素设置为 Flex 容器 /
}
.item {
/ 这是 Flex 容器的直接子元素，它们是 Flex 项目 /
}
“`
2. 轴线 (Axis) 的概念
理解 Flexbox 的轴线概念非常重要。Flexbox 布局是基于两个轴线进行的：
- 主轴 (Main Axis): Flex 项目沿着主轴排列。主轴的方向由
flex-direction属性决定。 - 交叉轴 (Cross Axis): 交叉轴垂直于主轴。
默认情况下 (flex-direction: row;)，主轴是水平的，从左到右；交叉轴是垂直的，从上到下。如果 flex-direction 设置为 column，主轴就变成垂直的，从上到下；交叉轴则变成水平的，从左到右。
(图片示意：主轴和交叉轴)
理解主轴和交叉轴的概念，对于理解后面介绍的对齐和空间分配属性至关重要。
3. 应用于 Flex 容器的属性
这些属性控制 Flex 项目在容器中的整体行为和排列方式。
3.1 display
flex: 将元素设置为块级 Flex 容器。inline-flex: 将元素设置为行内级 Flex 容器。
这是开启 Flexbox 布局的第一步。
css
.container {
display: flex; /* 开启 Flex 布局 */
}
3.2 flex-direction
决定主轴的方向，也就是 Flex 项目的排列方向。
row(默认值): 主轴为水平方向，起点在左端。项目从左到右排列。row-reverse: 主轴为水平方向，起点在右端。项目从右到左排列。column: 主轴为垂直方向，起点在上沿。项目从上到下排列。column-reverse: 主轴为垂直方向，起点在下沿。项目从下到上排列。
css
.container {
display: flex;
flex-direction: column; /* 项目将垂直排列 */
}
3.3 flex-wrap
决定 Flex 项目是否换行，以及如何换行。
nowrap(默认值): 所有项目都排在一条轴线上，不换行。可能会导致项目溢出容器。wrap: 项目沿主轴方向排列，当空间不足时，允许项目换行到下一行（或下一列）。新的一行会在旧的一行下方（或右方）。wrap-reverse: 项目沿主轴方向排列，当空间不足时，允许项目换行到上一行（或上一列）。新的一行会在旧的一行上方（或左方）。
css
.container {
display: flex;
flex-wrap: wrap; /* 允许项目换行 */
}
3.4 flex-flow
这是 flex-direction 和 flex-wrap 的简写属性。例如：flex-flow: row wrap; 等同于同时设置 flex-direction: row; 和 flex-wrap: wrap;。
css
.container {
display: flex;
flex-flow: row wrap; /* 等同于 flex-direction: row; flex-wrap: wrap; */
}
3.5 justify-content
定义了项目在主轴上的对齐方式。当 Flex 项目的总长度小于容器在主轴上的长度时，此属性用于分配剩余空间。
flex-start(默认值): 项目沿主轴的起点对齐。flex-end: 项目沿主轴的终点对齐。center: 项目在主轴居中对齐。space-between: 项目沿主轴均匀分布，第一个项目与起点对齐，最后一个项目与终点对齐。项目之间的间隔相等。space-around: 项目沿主轴均匀分布，每个项目两侧的间隔相等。所以项目之间的间隔比项目与容器边缘的间隔大一倍。space-evenly: 项目沿主轴均匀分布，项目之间以及项目与容器边缘的间隔都完全相等。
css
.container {
display: flex;
justify-content: center; /* 项目在主轴上居中对齐 */
}
3.6 align-items
定义了项目在交叉轴上的对齐方式。
stretch(默认值): 如果项目未设置高度或设为auto，将占据容器在交叉轴上的所有可用空间。flex-start: 项目沿交叉轴的起点对齐。flex-end: 项目沿交叉轴的终点对齐。center: 项目在交叉轴居中对齐。baseline: 项目根据其基线对齐。
css
.container {
display: flex;
align-items: center; /* 项目在交叉轴上居中对齐 */
}
3.7 align-content
定义了多根轴线（即多行/多列）在交叉轴上的对齐方式。此属性只在 flex-wrap 设置为 wrap 或 wrap-reverse 且有多行/多列的情况下才有效。如果只有一行/一列，该属性没有效果。
stretch(默认值): 轴线占满整个交叉轴。flex-start: 多根轴线沿交叉轴的起点对齐。flex-end: 多根轴线沿交叉轴的终点对齐。center: 多根轴线在交叉轴居中对齐。space-between: 多根轴线沿交叉轴均匀分布，第一根轴线与起点对齐，最后一根轴线与终点对齐。轴线之间的间隔相等。space-around: 多根轴线沿交叉轴均匀分布，每根轴线两侧的间隔相等。space-evenly: 多根轴线沿交叉轴均匀分布，轴线之间以及轴线与容器边缘的间隔都完全相等。
css
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* 多行在交叉轴上均匀分布 */
}
3.8 gap, row-gap, column-gap
这些属性用于设置 Flex 项目之间的间距。
gap: 同时设置行和列的间距，如gap: 10px;。也可以分别设置，如gap: 10px 20px;(行间距 10px，列间距 20px)。row-gap: 设置行之间的间距。column-gap: 设置列之间的间距。
这是一个比使用 margin 更方便的方式来控制项目间距，因为它不会在容器边缘产生额外的空间。
css
.container {
display: flex;
flex-wrap: wrap; /* gap 属性在 wrap 模式下特别有用 */
gap: 10px; /* 项目之间有 10px 的间隙 */
}
4. 应用于 Flex 项目的属性
这些属性控制单个 Flex 项目的行为。
4.1 order
定义项目的排列顺序。数值越小，排列越靠前，可以为负值。默认值为 0。
“`css
.item {
order: 2; / 这个项目会排在 order 为 0 或 1 的项目后面 /
}
.item:nth-child(3) {
order: -1; / 这个项目会排在最前面 /
}
“`
4.2 flex-grow
定义项目的放大比例。默认值为 0，即如果存在剩余空间，也不放大。如果一个项目的 flex-grow 属性值为大于 0 的数，当 Flex 容器有剩余空间时，该项目将按比例分配剩余空间。
例如，如果所有项目的 flex-grow 都为 1，它们将等分剩余空间。如果一个项目的 flex-grow 为 2，其他为 1，则前者将获得剩余空间的两倍。
“`css
.item {
flex-grow: 1; / 允许该项目放大，占据剩余空间 /
}
.item-big {
flex-grow: 2; / 比其他 flex-grow 为 1 的项目获得双倍剩余空间 /
}
“`
4.3 flex-shrink
定义项目的缩小比例。默认值为 1，即如果空间不足，项目将等比例缩小。如果一个项目的 flex-shrink 属性值为 0，则它不会缩小，即使空间不足也保持其原始尺寸（或 flex-basis 指定的尺寸）。
“`css
.item {
flex-shrink: 1; / 允许该项目缩小 /
}
.item-fixed {
flex-shrink: 0; / 禁止该项目缩小 /
}
“`
4.4 flex-basis
定义在分配剩余空间之前，项目的初始主轴尺寸。默认值为 auto，表示项目的基础尺寸由其内容或 width/height 属性决定。也可以设置为具体的长度值，如 100px 或 50%。
如果一个项目同时设置了 width (或 height，取决于主轴方向) 和 flex-basis，通常 flex-basis 会优先生效。
“`css
.item {
flex-basis: 100px; / 项目的初始宽度为 100px /
}
.item-half {
flex-basis: 50%; / 项目的初始宽度为容器宽度的一半 /
}
“`
4.5 flex
这是 flex-grow, flex-shrink, 和 flex-basis 的简写属性。其语法为 flex: <flex-grow> <flex-shrink> <flex-basis>;。后两个参数 (flex-shrink 和 flex-basis) 是可选的，但如果省略，会有默认值。
常见用法：
flex: auto;: 等同于flex: 1 1 auto;。项目可以放大和缩小，基础尺寸由内容或 width/height 决定。flex: none;: 等同于flex: 0 0 auto;。项目不放大也不缩小，保持原始尺寸（由内容或 width/height 决定）。flex: 0 auto;: 等同于flex: 0 1 auto;。项目不放大，但允许缩小，基础尺寸由内容决定。flex: 1;: 这是最常用的写法，等同于flex: 1 1 0%;(或者在旧规范中是1 1 auto;，但现代浏览器通常是0%)。表示项目可以放大和缩小，并且如果容器有空间，它会尝试占据所有剩余空间，通常用于创建等宽/高或占据剩余空间的项目。
“`css
.item {
flex: 1; / 常见用法，项目会等分剩余空间（或填满剩余空间） /
}
.item-fixed {
flex: 0 0 200px; / 项目固定宽度为 200px，不放大也不缩小 /
}
“`
4.6 align-self
允许单个项目有不同于容器 align-items 属性的对齐方式。可以覆盖容器的 align-items 设置。其值与 align-items 属性完全相同。
css
.item {
align-self: center; /* 覆盖容器的 align-items 设置，该项目在交叉轴上居中 */
}
5. 一个简单的 Flexbox 例子
我们来看一个简单的例子，创建一个水平居中且内部项目等宽分布的布局：
“`html
“`
“`css
.container {
display: flex; / 1. 开启 Flex 布局 /
justify-content: center; / 2. 项目在主轴（水平）上居中 /
align-items: center; / 3. 项目在交叉轴（垂直）上居中 /
height: 200px; / 给容器一个高度，以便观察 align-items 效果 /
border: 1px solid #ccc; / 方便查看容器边界 /
}
.item {
flex: 1; / 4. 项目等分剩余空间，实现等宽效果 /
text-align: center;
padding: 10px;
margin: 5px; / 项目之间的间距，或者可以使用 gap 属性 /
background-color: #f0f0f0;
border: 1px solid #999;
}
“`
在这个例子中：
1. .container 设置 display: flex; 成为 Flex 容器。
2. justify-content: center; 将所有 .item 在容器的水平中心排列。
3. align-items: center; 将所有 .item 在容器的垂直中心排列。
4. 每个 .item 设置 flex: 1;，这意味着它们会等比例放大，平分容器的剩余空间，从而实现等宽的效果（在默认 flex-direction: row; 且空间充足的情况下）。
总结
CSS Flexbox 是一种强大且灵活的布局方式，特别适用于一维布局需求。它通过定义 Flex 容器和 Flex 项目的行为，提供了丰富的属性来控制项目的排列方向、换行、对齐方式以及空间的分配。
核心要点回顾：
- 给父元素设置
display: flex;开启 Flexbox 布局。 - 理解主轴 (
flex-direction) 和交叉轴的概念。 - 应用于容器的属性（如
justify-content,align-items,flex-wrap）控制整体布局。 - 应用于项目的属性（如
order,flex-grow,flex-shrink,flex-basis,align-self）控制单个项目的行为。 flex是flex-grow,flex-shrink,flex-basis的常用简写。
Flexbox 的概念相对直观，但要完全掌握需要多加练习。尝试在实际项目中运用这些属性，你会发现它能极大地提高布局效率，尤其是在处理响应式设计时。
希望这篇入门教程能为你打开 Flexbox 的大门！祝你学习愉快！