弹性布局
Flex
中级通用弹性布局（Flex）是 CSS 中让容器沿一个方向排列子元素，并分配剩余空间的布局方式。它能帮你处理元素宽度变化后的对齐与间距，比如让工具栏左侧放标题、右侧放操作按钮。
你可能会说：「我想让标题靠左、几个操作按钮靠右，窗口变宽变窄时也能保持对齐。」
读之前建议先了解
动手看看订单页的工具栏
订单列表
筛选
导出
+ 新建订单
排列方向 flex-direction
主轴对齐 justify-content
交叉轴对齐 align-items
flex 容器决定子元素沿哪条线排、剩余空间怎么分；拖动宽度，看看多出来的空间去了哪里。
两端对齐：第一个和最后一个元素贴边，剩余空间平均分进中间的间隔。「标题在左、按钮在右」的工具栏最常用这一种。
要点Flex 是怎么安排子元素的？
- 1
先确定排列的主方向
你给父容器设置 Flex 后，直接子元素会沿主轴排列；默认是从左到右，也可以改成纵向。主轴确定后，我们才能说清楚要调整的是元素之间的距离，还是垂直于主轴的对齐。
- 2
剩余空间决定如何分配
Flex 不只是把元素排成一行。比如工具栏里标题长度会变，你可以让右侧按钮组靠右，或让某个区域占用剩余空间。这样容器变宽时，布局能跟着调整，而不是依赖写死的间距。
- 3
空间不够时检查换行与收缩
容器变窄时，子元素可能收缩，也可能因为内容太长而溢出；它们不会默认换到下一行。你可以按需求允许换行，并检查文字和按钮的最小宽度，这比只看宽屏效果更可靠。
容易混淆的地方
Flex 主要处理一行或一列中的排列与空间分配。要同时精确控制多行、多列的位置，比如后台仪表盘的卡片区域，网格布局（Grid）通常更合适。定位（Position）则适合让元素脱离常规排列、贴在指定位置；用它排一整行按钮，内容一变就容易互相遮挡。
什么时候用
适合用
- 做后台页面的顶部工具栏：左侧是页面标题，右侧是筛选和新建按钮，标题长度变化时仍要分居两端。
- 做商品卡片里的价格与购买按钮：希望它们在同一行，并根据卡片宽度分配空间。
- 做聊天输入区：输入框占用按钮之外的剩余宽度，发送按钮保持自身所需宽度。
不适合用
- 要做行列位置都明确的仪表盘卡片区，并让卡片跨越多列时，改用网格布局更直接。
- 只是想让悬浮客服入口固定在视口角落，与页面内容的排列无关时，用定位更合适。
- 只想给一段正文设置阅读宽度与左右留白时，设置宽度和外边距就够了，不需要 Flex。
练一练选一个答案，看看解释
你在做一个后台工具栏：左侧标题长短不一，右侧有两个按钮；窗口变宽时，按钮组要保持靠右。你会让 AI Agent 采用哪种方案？
让 AI 帮你做复制给 AI Agent 直接用
请把后台页面的顶部工具栏改成弹性布局（Flex）：左侧放标题，右侧放操作按钮组，两组在宽屏时分居两端。请检查窄屏下标题变长时是否挤压或遮挡按钮，并说明你选择的换行或收缩方案。