CSS 的 Flexbox（弹性盒子布局） 是一种用于一维布局（行或列）的强大工具，能够轻松实现元素的对齐、分布和响应式排列。下面是 Flex 布局的基本使用方法：

1. 启用 Flex 布局

只需将容器的 display 属性设为 flex 或 inline-flex：

.container {
  display: flex;
}

此时，容器内的所有直接子元素（称为“flex 项目”）就会按照 Flex 规则进行布局。

2. 容器属性（作用于父容器）

主轴与交叉轴说明：

主轴（main axis）：默认水平方向（从左到右），由 flex-direction 控制。

交叉轴（cross axis）：垂直于主轴。

常用容器属性：

flex-direction  主轴方向：

row（默认）、row-reverse、column、column-reverse

justify-content 主轴上的对齐方式：

flex-start（默认）、flex-end、center、space-between、space-around、space-evenly

align-items   交叉轴上的对齐方式：

stretch（默认）、flex-start、flex-end、center、baseline

align-content   多行时交叉轴上的对齐（需配合 flex-wrap: wrap）

flex-wrap 是否换行：

nowrap（默认）、wrap、wrap-reverse

flex-flow flex-direction 和 flex-wrap 的简写

示例：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;   /* 水平居中 */
  align-items: center;       /* 垂直居中 */
  flex-wrap: wrap;
}

3. 项目属性（作用于子元素）

order 排列顺序（数值越小越靠前，默认为 0）

flex-grow 放大比例（默认 0，不放大）

flex-shrink 缩小比例（默认 1，空间不足时缩小）

flex-basis 分配空间前的初始大小（如 100px、50% 等）

flex flex-grow、flex-shrink、flex-basis 的简写（常用！）

align-self 单个项目在交叉轴上的对齐方式（覆盖 align-items）

常用简写：

.item {
  flex: 1;          /* 等价于 flex: 1 1 0% */
  flex: 0 0 auto;   /* 不伸缩也不收缩，按内容大小 */
}

4. 实战示例：水平垂直居中

<div class="container">
  <div class="item">居中内容</div>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器占满视口高度 */
}

5. 注意事项

Flex 是一维布局模型，适合处理一行或一列的布局；复杂二维布局建议用 CSS Grid。

margin: auto 在 Flex 项目中依然有效，可用于对齐（比如 margin-left: auto 将元素推到右侧）。

Flex 默认主轴是横向（row），如果改成纵向（column），justify-content 就变成控制垂直方向，align-items 控制水平方向。