你可能会说
这几个元素想横着排，还要垂直居中
让一排元素自动伸缩、对齐方便的排版方式
看一眼它长什么样
上面这些交互全部由 CSS 完成，没有加载任何脚本 —— 和真实产品里的组件是同一个道理。
大白话解释
弹性布局是用来摆「一行」或「一列」元素的工具。你把几个盒子丢进一个容器，说一句「横着排、中间留空、垂直居中」，它们自己就排好了。
像地铁上几个人分一排座位：可以让每个人一样宽，也可以让某个人占掉剩下的全部空间，靠左靠右由你说了算。
它最省事的地方是居中和等分。以前要写一堆偏方才能让东西垂直居中，现在两行就搞定。
什么时候会遇到
- 导航栏左边 logo、右边几个菜单项，中间自动撑开留白。
- 卡片里图片在上文字在下，底部日期永远贴着底对齐。
- 表单一行的标签加输入框，输入框自动占满剩余宽度。
- 一排按钮在窄屏要自动换行，还得保持间距一致。
- 页面正中放个登录框，水平垂直都要居中。
- 用 Tailwind 写的那几个以 flex 开头的类名，就是在用弹性布局。
可以直接对 Agent 说
「这个聊天页面的输入框要固定在底部、消息列表占满上面剩下的高度，用弹性布局实现，注意消息多的时候能自己滚动，别把输入框顶下去。」
「导航栏现在是散的，改成左边 logo、右边三个菜单项、整体垂直居中，用弹性布局实现，别用浮动。」
「这排按钮在窄屏会挤变形，帮我改成自动换行，每个按钮保留最小宽度，间距统一 8px。」
正文里带下划线的词，是本站其它词条的入口；这一篇自动链了 2 个相关术语。
最容易想岔的地方
常见的错误理解： 弹性布局就是让元素自动排列，不用管宽度
更准确的理解： 它的重点是分配剩余空间和定义收缩规则。不写收缩比例，窄屏幕上内容多的那块会被压到看不见
常见的错误理解： 用了弹性布局就不用管内容长度，多长都能放下
更准确的理解： 弹性布局只负责分配空间，不负责截断内容。文字过长还是要自己加省略号或者换行
测一下：真遇到了你会怎么处理
单选 · 选完立刻看解释
导航栏里有 5 个按钮，要横向排列、贴住两端、中间间距自动均分。
用什么最合适？
-
一行上的对齐和分配空间正是 Flexbox 的主场，一行属性就完事。
-
Grid 擅长同时控制行和列。只在一条轴上排东西时用它，属于杀鸡用牛刀。
-
浮动是早期没有办法时的方案，要处理清除浮动、等高、垂直居中等一堆副作用。
题目只考「这个场景下的第一反应」，不考名词背诵 —— 弹性布局的定义在上面已经讲过了。