2.3 Flex 与 Grid 工具类：断点后的微调权

2.3 Flex 与 Grid 工具类：断点后的微调权

flex 工具类（d-flex、justify-content-*、align-items-*、flex-column 等）把 Flexbox 的每个属性都封装成可带断点的类；grid 工具类（grid、gap-*）则是 5.x 补充的 CSS Grid 快捷方式。栅格管「谁占几列」，它们管「格子内外怎么对齐、怎么伸缩」，是断案中最后一档微调权。

位置：2.2 把地块分完了，本节审地块内部的对齐与伸缩纠纷。它也直接为第 4 章的工具类总账立好框架。

现场勘查：三根轴上的管辖分工

图 2-3 flex 工具类的三轴管辖

取证：五组高频微调判例

<!-- 判例一：导航条两端对齐，md 起居中 —— justify 的断点变体 -->
<ul class="d-flex justify-content-between justify-content-md-center gap-3 list-unstyled">
  <li>首页</li><li>专栏</li><li>关于</li>
</ul>
<!-- 效果：手机上首尾贴边（拇指易触），768px 起三项居中收拢 -->

<!-- 判例二：图标与文字垂直居中 —— align-items -->
<div class="d-flex align-items-center gap-2">
  <span class="fs-4">收件箱</span>
  <span class="badge text-bg-primary rounded-pill">12</span>
</div>
<!-- 效果：角标与大号文字按文字基线附近对齐，不再悬浮偏高 -->

<!-- 判例三：手机竖排、md 起横排 —— 方向也是响应式的 -->
<div class="d-flex flex-column flex-md-row gap-3">
  <div class="p-2 border">块 A</div>
  <div class="p-2 border">块 B</div>
</div>
<!-- 效果：xs 上下摞、md 起左右排，无需写两套结构 -->

<!-- 判例四：搜索框认领剩余宽度 —— 伸缩权 -->
<form class="d-flex gap-2" role="search">
  <input class="form-control flex-grow-1" placeholder="搜索关键词">
  <button class="btn btn-outline-secondary flex-shrink-0">搜索</button>
</form>
<!-- 效果：输入框吃掉全部剩余空间，按钮永不被压缩 -->

<!-- 判例五：独立排序 —— order 的工具类形态 -->
<div class="d-flex">
  <div class="order-3">DOM 第一，视觉第三</div>
  <div class="order-1">DOM 第二，视觉第一</div>
  <div class="order-2">DOM 第三，视觉第二</div>
</div>
​

五个判例对应五种日常纠纷：分布、对齐、方向、伸缩、座次。共同点是全都可加断点前缀——align-items-lg-start、gap-md-4 都是合法条文，微调权同样按断点分段发放。

裁决：flex 工具与栅格的权限边界

<!-- grid 工具类：一列等高按钮组，手机竖排、sm 起两列 -->
<div class="d-grid gap-2 d-sm-block">
  <button class="btn btn-primary">保存草稿</button>
  <button class="btn btn-outline-secondary">取消</button>
</div>
<!-- 效果：xs 下按钮整行等宽堆叠（d-grid），576px 起恢复行内按钮（d-sm-block） -->
​

d-grid 出场率最高的场景就是「全宽按钮」：手机上整行、大屏恢复 inline，两个类完成过去要写媒体查询的活。

补一个主轴方向的换挡判例，这是微调权最容易背锅的地方：产品要求「标签行手机上横向滚动、md 起换行铺开」。判决 d-flex gap-2 flex-nowrap overflow-auto flex-md-wrap——nowrap 锁死单行，overflow-auto 交出横向滚动条，md 起 wrap 接管恢复折行。若漏写 flex-md-wrap，md 起 nowrap 依旧，标签被裁切在屏幕外——微调权没生效时，先查断点前缀是否漏挂，而不是怀疑 flex 本身。

⚠️ 常见坑：d-flex 与 col-* 混用在同一元素上时，display 被改写为 flex，列的宽度规则（flex-basis 与 width）可能互相牵制。原则一条：布局骨架交给 row/col，col 内部再套 d-flex 做精细对齐，两层各判各的。

变式：同一块内容的四种排法

按钮组需求反复变，是练习微调权的好靶子。竖排菜单：d-flex flex-column gap-2；右对齐操作条：d-flex justify-content-end gap-2；两端对齐（左标题右按钮）：justify-content-between 加 align-items-center；换行的标签云：d-flex flex-wrap gap-2，标签多了自动折行。四种排法共享同一份 HTML，只动容器类——微调权的价值就在于判决成本极低。

结案要点

• flex 工具类把 Flexbox 每个属性封装成可带断点的类，主轴归 justify-content-*，交叉轴归 align-items-*；
• 方向（flex-md-row）、伸缩（flex-grow-1）、间距（gap-*）、座次（order-*）都能按断点分段判决；
• d-grid 是全宽按钮与二维网格的快捷通道；
• 权限边界：骨架归栅格，格子内的对齐归 flex，混层判决是事故高发区。下一节审最后一类：元素的去留。