一、开启 Flex 布局

给容器加上 display: flex，它的直接子元素就会自动排成一行。

.box {
  display: flex;
}

方向由 flex-direction 控制，默认是 row（横向），改成 column 就是纵向。

二、主轴与交叉轴

这是 Flex 最核心的两个概念：

justify-content 管主轴对齐，align-items 管交叉轴对齐。

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

常用取值：flex-start（起点）、center（居中）、flex-end（终点）、space-between（两端对齐）、space-around（环绕均匀分布）。

三、flex-grow / shrink / basis

这三个属性写在子元素上，控制它如何"伸缩"：

.item {
  flex: 1 1 200px;   /* 放大:1  缩小:1  基础宽度:200px */
}
简写口诀：flex: 1 表示"平均分剩余空间"，做等宽分栏时最常用。

四、常见布局案例

1. 让一个盒子水平垂直居中

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

2. 导航栏：左 logo 右菜单

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. 卡片自适应换行

.cards {
  display: flex;
  flex-wrap: wrap;     /* 允许换行 */
  gap: 20px;           /* 间距 */
}
.card {
  flex: 1 1 240px;     /* 最小约 240px，自动换行 */
}

五、小结