display: flex 是 CSS 中用来创建灵活布局的属性

Flexbox（弹性布局）非常适合用来排版网页中的元素，尤其是在需要调整元素大小、排列方式或对齐方式时非常方便。以下是对 display: flex 的详细讲解和通俗易懂的说明。

1. 基本概念

• Flex Container（弹性容器）：应用了 display: flex 的元素，成为 “弹性容器”，容器内的元素称为“弹性子项”。
• Flex Items（弹性子项）：弹性容器内部的直接子元素，它们会根据容器的配置自动排列和调整大小。

2. 主轴与交叉轴

• 主轴 (Main Axis)：弹性容器中排列元素的轴，默认是水平方向，从左到右（flex-direction: row）。
• 交叉轴 (Cross Axis)：垂直于主轴的轴，即从上到下。

3. 常用属性

容器属性

1. flex-direction：设置主轴方向，控制元素排列方式。

   • row：默认值，子项沿主轴水平从左到右排列。
   • row-reverse：子项沿主轴从右到左排列。
   • column：子项沿主轴垂直从上到下排列。
   • column-reverse：子项从下到上排列。

2. justify-content：控制子项沿主轴的对齐方式。

   • flex-start：从主轴的起点对齐（默认）。
   • flex-end：从主轴的终点对齐。
   • center：居中对齐。
   • space-between：子项之间等距分布，首尾对齐容器边界。
   • space-around：子项之间等距分布，首尾与边界之间留有空间。

3. align-items：控制子项沿交叉轴的对齐方式。

   • flex-start：从交叉轴的起点对齐。
   • flex-end：从交叉轴的终点对齐。
   • center：在交叉轴上居中对齐。
   • stretch：默认值，子项沿交叉轴拉伸填满容器。
   • baseline：按照文本基线对齐。

4. flex-wrap：控制子项是否换行。

   • nowrap：默认值，不换行。
   • wrap：换行，多余的子项会被移到下一行。
   • wrap-reverse：换行，但行从下往上堆叠。

5. align-content：当有多行时，控制多行的对齐方式（仅在flex-wrap开启后生效）。

   • flex-start、flex-end、center、space-between、space-around、stretch：类似 justify-content 的对齐方式，但用于多行。

子项属性

1. flex：用于设置子项的“弹性”比例。比如 flex: 1，表示子项占据容器内剩余空间的 1 份。多个子项设置不同的 flex 值，比例会相应调整。

2. align-self：单独控制某个子项的交叉轴对齐方式，覆盖 align-items 设置。

4. 示例：创建水平居中、垂直居中的布局

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器高度，使内容在整个视口高度居中 */
}

5. 实际应用

• 导航栏：可以轻松创建水平排列、间距均匀的导航按钮。
• 卡片布局：展示卡片样式的内容，flex-wrap 可以让卡片在空间不足时自动换行。
• 居中对齐：利用 justify-content 和 align-items，快速实现子项的居中对齐。