6. Flex 弹性布局

这是什么：Flex 弹性布局 = 给父元素写 display: flex，子元素就沿主轴自动排布、伸缩、对齐的一维布局方案。

为什么用：浮动和定位适合做「点状小事」，一整行的排布像导航、工具栏、卡片列表，当今主流做法就是 Flex——给父元素一行代码，子元素自动整整齐齐。

如何用：先给父容器加 display: flex 和 gap，看子元素自动排成一行。

6.1 开启 Flex

.nav {
  display: flex;     /* 子元素进入弹性容器 */
  gap: 12px;         /* 子元素之间统一留 12px 缝 */
}

开启后，子元素（flex item）变成「弹性项目」：默认横向排一行、可以并排、不会外边距叠加。

6.2 两个轴

Flex 的一切围绕两条轴：

• 主轴：默认水平向右（子元素排列方向）
• 交叉轴：垂直于主轴，默认向下

6.3 父容器属性（最常用四条）

.nav {
  display: flex;
  justify-content: space-between; /* 主轴：两端对齐，缝隙自动分 */
  align-items: center;            /* 交叉轴：垂直居中 */
  flex-wrap: wrap;                /* 放不下时换行 */
  gap: 12px;
}

垂直居中神器：display: flex; align-items: center; justify-content: center; 两个居中一次配齐。

6.4 子元素属性：flex 三件套

.search {
  flex: 1;             /* 弹性伸缩：占满剩余空间 */
}
.side {
  flex: 0 0 200px;     /* 不伸缩：固定 200px */
}

flex: 1 的意思：剩余空间都分给这一项——经典「固定侧栏 + 自适应主区」：

.layout   { display: flex; gap: 16px; }
.sidebar  { flex: 0 0 200px; }
.main     { flex: 1; }

你会看到：右侧主内容随窗口宽度缩放，左侧栏始终 200px。

6.5 案例三连（背下来直接用）

/* 1. 水平滚动条列表 */
.tabs { display: flex; overflow-x: auto; }

/* 2. 骑行徽章（角标居中） */
.dot { display: flex; align-items: center; justify-content: center; }

/* 3. 等宽卡片网格 */
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.cards .card { flex: 1 1 220px; }  /* 每卡至少 220px，可换行 */

6.6 动手改

1. 把 justify-content 依次换成四种值，观察间距变化
2. 让 .sidebar 换到右边（用 flex-direction: row-reverse）
3. 卡片列表改成一行 3 张（flex: 1 1 0 + 容器限宽）

6.7 小结

• 父元素 display: flex 开启；gap 管缝
• 主轴 justify-content、交叉轴 align-items
• 子元素 flex: 1 抢空间、flex: 0 0 200px 固定宽
• 两句入口语：「一排怎么分」找 flex，「一页几大块」同理

下一章：Grid 网格布局 🐸