CSS Flexbox布局详解

描述：
Flexbox（弹性盒子布局）是CSS3中一种一维布局模型，用于在容器内对项目进行排列、对齐和空间分配。它特别适合处理动态或未知大小的元素布局，能有效替代浮动和表格布局。

核心概念：

1. 容器（Flex Container）：设置display: flex的元素，其直接子元素自动成为Flex项目。
2. 项目（Flex Items）：容器的每个直接子元素。
3. 主轴（Main Axis）：项目排列的主要方向（默认水平）。
4. 交叉轴（Cross Axis）：与主轴垂直的方向（默认垂直）。

步骤1：开启Flex布局
在容器上设置display: flex或display: inline-flex，子元素立即变为Flex项目：

.container {
  display: flex; /* 块级Flex容器 */
}

步骤2：主轴方向控制（flex-direction）
通过flex-direction定义主轴方向，影响项目排列顺序：

• row（默认）：水平从左到右
• row-reverse：水平从右到左
• column：垂直从上到下
• column-reverse：垂直从下到上

示例：垂直排列项目

.container {
  flex-direction: column;
}

步骤3：主轴换行控制（flex-wrap）
默认项目挤在一条线上，flex-wrap控制是否换行：

• nowrap（默认）：不换行
• wrap：向下换行
• wrap-reverse：向上换行

示例：允许换行且反向

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

步骤4：主轴对齐（justify-content）
分配项目在主轴上的对齐方式：

• flex-start（默认）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目间隔相等
• space-around：项目两侧间隔相等
• space-evenly：所有间隔完全相等

示例：平均分布项目

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

步骤5：交叉轴对齐（align-items）
控制项目在交叉轴上的对齐方式：

• stretch（默认）：拉伸填满容器
• flex-start：顶部对齐
• flex-end：底部对齐
• center：居中对齐
• baseline：按基线对齐

示例：垂直居中所有项目

.container {
  align-items: center;
}

步骤6：多行对齐（align-content）
当存在多行项目时，控制行间在交叉轴上的对齐（需配合flex-wrap: wrap）：

• stretch（默认）：行拉伸填满空间
• flex-start：所有行贴顶部排列
• center：所有行垂直居中

示例：多行居中

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

步骤7：项目属性（flex-grow, flex-shrink, flex-basis）

• flex-grow：定义项目放大比例（默认0，不放大）
• flex-shrink：定义项目缩小比例（默认1，可缩小）
• flex-basis：项目初始大小（默认auto）

简写flex: grow shrink basis：

.item {
  flex: 1; /* 等价于 1 1 0% */
  flex: 0 0 100px; /* 固定宽度100px，不伸缩 */
}

步骤8：项目自定义对齐（align-self）
单个项目可覆盖容器的align-items设置：

.item {
  align-self: flex-end; /* 该项目底部对齐 */
}

实际应用示例：实现居中布局

.container {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
  height: 300px;
}

关键点：

• Flex布局适用于一维线性布局，二维布局需用Grid。
• 项目默认沿主轴排列，需区分主轴与交叉轴属性。
• 项目属性（如flex）优先级高于容器属性（如justify-content）。