工具栏、按钮组、导航项、表单字段堆叠、一行卡片——任何沿一个方向排列并要对齐或分配空间的场景。
产品与设计 · 布局基础
弹性布局Flex
在一维主轴上分配空间、对齐项目并处理换行的布局方式。
亲手布置一行 flex 工具栏
主案例：一个产品工具栏（品牌 / 搜索 / 筛选 / 开始任务）。切换方向、主轴分布、交叉轴对齐、剩余空间分配和换行，观察 item 的位置、尺寸与分布如何直接承载结果；再对照目标检查是否达标。
场景：布置一行工具栏（品牌 / 搜索 / 筛选 / 开始任务）。调整主轴方向、主轴分布、交叉轴对齐、剩余空间分配和换行，看 item 的位置、尺寸与分布如何直接变化；再点「对照目标检查」。
方向
主轴分布
交叉轴对齐
剩余空间
换行
品牌
搜索flex:0
筛选
开始任务主 CTA
当前：横向 row · 分布 space-between · 交叉轴 center · 不分配剩余空间 · 允许换行
目标：品牌在起点、开始任务在终点、搜索吃满中间剩余空间。先调下方控件，再点「对照目标检查」看是否达标。
面板里测到的结论怎么用
刚才 item 的位置和尺寸变化，对应的是方向、主轴分布、交叉轴对齐、空间分配与换行这五件事。
- flex-direction 决定主轴：row 横向、column 纵向。justify 沿主轴工作，align 沿交叉轴工作。
- justify-content 分配主轴剩余空间：start 聚起点、center 居中、end 聚终点、space-between 两端贴边、space-around 每个 item 两侧等距。
- align-items 对齐交叉轴：start/center/end 贴边或居中，stretch 让 item 拉伸填满交叉轴。
- flex-grow 决定谁吃剩余空间（面板里搜索 flex:1）；flex-basis 定起点尺寸，flex-shrink 决定空间不足时谁先缩。
- gap 统一间距，取代随机 margin；flex-wrap:wrap 允许换行，nowrap 在空间不足时会溢出。
什么时候用 flex
看到一维方向的对齐和分布需求时优先 flex；它不是万能解，二维栅格和层叠另有更合适的工具。
二维复杂栅格（行和列都要控制）用 grid；脱离文档流的层叠用 position；flex 管不了真正的二维对齐。
怎么用：从容器到换行的最短路径
从目标倒推：先定方向，再分布主轴，再对齐交叉轴，需要时让某项吃空间，最后处理小屏换行。
- 容器写 display:flex，先选 flex-direction（一行还是一列）。
- 用 justify-content 分布主轴，用 align-items 对齐交叉轴，用 gap 统一间距。
- 需要某项吃满剩余空间就给它 flex:1（等于 grow:1, shrink:1, basis:0%）。
- 小屏加 flex-wrap:wrap；nowrap 必须同时给出溢出策略（缩窄内容、滚动或换轴）。
同一工具栏：正例与反例
目标都是让品牌靠左、操作靠右、间距统一。差异只在用 flex 空间分配还是手写 margin 硬撑。
容器 display:flex + justify-content:space-between + gap:12px：品牌自动靠左、操作自动靠右，间距统一，加一个按钮也不用重算边距。
差异：用 flex 的空间分配规则对齐，加项与小屏都不崩。用 margin-left:auto 和一串 margin-right 手动硬撑：每加一个按钮都要重算边距，小屏换行后顺序和间距错位。
差异：只改这一处——把手写 margin 换成 flex 空间分配。快速自测
导航栏左 logo、右菜单，中间想放一个搜索框吃满剩余空间，该用哪种 flex 组合？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。