Flexbox 演练场

如何使用Flexbox 演练场

关于Flexbox 演练场的常见问题

Flexbox 演练场会上传数据吗？安全吗？

不会上传。Flexbox 演练场的属性调节、尺寸求解、代码生成与粘贴反解析全部在你的浏览器本地完成，容器属性、项目文字与生成的代码都不会发送到服务器，预览区渲染的就是同一份声明，关闭页面即清除。（站点自身仅有匿名访问量统计，与你调的 flex 布局参数无关。）

手机上能用 Flexbox 演练场吗？

可以，且不用装任何 App 或插件。它是纯网页实现，手机、平板、电脑浏览器打开即用，下拉与滑杆都是原生控件，数值输入框保留了草稿态，逐字符重输不会被吃掉字符。窄屏下属性面板会折成上下堆叠、预览区自己横向滚动，不会把页面撑破。

flex 布局怎么让元素水平垂直居中？

给容器写 display: flex 之后，再补 justify-content: center 与 align-items: center 两句就够了。前者管主轴、后者管交叉轴，横排时正好一个管左右、一个管上下。本页「水平垂直居中」配方点一下就能载入，生成的代码是：.flex-container { display: flex; justify-content: center; align-items: center; } .flex-item-1 { height: 64px; }。注意方向换成 column 之后这两句管的方向会互换。

flex 简写里的 1 和 auto 有什么区别？

差别全在 flex-basis 上：flex: 1 展开是 1 1 0%，起点归零再按因子分，结果是严格等分；flex: auto 展开是 1 1 auto，先按内容打底再分剩余空间。同样两个内容宽 60px 与 300px 的项目放进 480px 容器，前者是 240px 与 240px，后者是 120px 与 360px。这也是最容易被记混的一条。

flex-grow 和 flex-shrink 怎么分空间？

两套规则并不对称。flex-grow 直接按因子比例分剩余空间，和项目本身多宽无关：因子 1 比 3 时，480px 容器里两项分到 120px 与 360px。flex-shrink 则按 shrink 乘以 flex-basis 加权：基准 400px 与 100px、shrink 都是 1 时，收缩量是 4 比 1，最终是 384px 与 96px，不是各让一半。

flex 项目为什么缩不下去还溢出容器？

多半是自动最小尺寸在挡着。flex 项目的 min-width 初始值是 auto，会解析成内容的最小尺寸，内容撑得住就一步都不让。两个内容宽 250px 的项目放进 300px 容器时，最终仍是 250px 各自站着、溢出约 200px；给它们补一句 min-width: 0 之后就能缩到 150px 正好放下。本页每张项目卡片上都有这个开关。

flex 布局竖排时 justify-content 为什么变垂直？

因为 justify-content 管的从来不是水平方向，而是主轴方向。flex-direction 竖排时主轴变成纵轴，它自然就改管上下分布了，而 align-items 反过来去管左右对齐。这也是很多人把 column 布局调不出效果的原因：把两个属性对调一下就对了。本页预览区上方会实时显示当前主轴与交叉轴各是哪一条。

flex 布局里 align-items 和 align-content 有什么区别？

align-items 管的是每个项目在自己所在那一行里怎么对齐，单行多行都有效；align-content 管的是多行之间怎么分布，只有真正换了行才有意义。align-content 不生效的原因只有一个：容器没换行。把 flex-wrap 改成 wrap 之后它立刻就有反应了。本页在 nowrap 时会把这个下拉置灰并写明原因。

flex-basis 和 width 同时写以哪个为准？

主轴方向上 flex-basis 优先，width 只在 flex-basis 是 auto 时才接管。所以既写了 width 又写 flex-basis: 0% 的项目，实际起点是 0 而不是那个 width。另外 flex-basis 百分比按容器主轴内尺寸解析，容器一换尺寸这个数就跟着变；要一个不随容器变的起点请直接写像素值。

flex 布局最后一行怎么左对齐不被拉开？

这是 space-between 的固有行为：它对每一行一视同仁，最后一行项目少的时候空隙自然被拉得很大。flex 最后一行左对齐的稳妥做法有三条：给项目定宽再用 gap 控间距、补几个不可见的占位元素凑满一行、或者干脆改用 Grid。本页在真的换了行且用了 space-between 时会主动提示这一条。

Flexbox 演练场能导出 Tailwind flex 类名吗？

能。切到 Tailwind 标签就会按官方类名优先输出，例如媒体对象配方的两个项目是 shrink-0 basis-12 h-12 与 flex-1 h-[72px] min-w-0。档位对不上时会退回任意值写法并在下方逐条列出是哪几条，不会硬套一个最接近的档位悄悄改掉你的数值。对照表按标注的版本，其他版本请自行核对。

flex 布局里 order 改了顺序读屏软件为什么没变？

order 属性只改视觉顺序，DOM 顺序一个字都没动，而读屏软件与键盘 Tab 焦点走的是 DOM 顺序，于是就出现了「看着在前面、读起来在后面」的错位。要真正换顺序请改 HTML 里的元素顺序，本页每张项目卡片上的上移与下移按钮改的就是它。order 更适合做纯视觉的微调。

flex 布局和 Grid 布局该怎么选？

Flex 是一维的，沿一条主轴排一串项目，适合导航栏、按钮组、媒体对象、卡片一行这类内容驱动的场景。Grid 是二维的，先画好行列再往格子里放东西，适合整页骨架与需要行列同时对齐的表格式布局。判断标准很简单：只关心一个方向就用 flex，行和列都要对齐就用 Grid，两者混用也很常见。

Flexbox 属性速查表：容器与项目分工

flex 布局怎么用，一句话概括：给容器写一句 display: flex，再用几个属性决定项目沿主轴怎么排、沿交叉轴怎么对齐。容器写 display: flex 还是 inline-flex，只影响容器自己在外面怎么排，内部规则完全一样。忘了某个属性怎么写就直接跳到下面这份 flex 布局速查表：取值、初始值和一句话说明都在同一行，不用再去翻规范原文。这件事在中文里还有好几种叫法 —— flex 布局生成器、CSS 弹性布局、弹性盒子布局，说的都是同一件事；想系统看一遍的，可以把这一页当成一份能动手调的 flex 布局教程。英文站点上的 flexbox playground、css flexbox generator、flex layout generator 指的也是它，Flexbox 在线演练这个说法同样常见。

属性一共分两组，分清楚是本工具最先要说的事：一组写在容器上，一组写在项目上。写错地方是最常见的入门错误 —— 把 align-self 写到容器上、或者把 justify-content 写到项目上，浏览器不会报错，只会什么都不发生。

主轴与交叉轴：flex-direction 一改全都变

flex 布局里没有「水平属性」和「垂直属性」，只有主轴属性和交叉轴属性。flex-direction 竖排时主轴变成纵轴，于是 justify-content 从管左右分布改成管上下分布，align-items 反过来去管左右对齐。 这是 column 布局调不出效果的头号原因，也是本页预览区上方一直显示当前主轴方向的理由。

flex 水平垂直居中只要两句声明，就是这套规则最好用的一个推论：横排时 justify-content: center 管左右、align-items: center 管上下，两句一起写就居中了。反过来在 column 下，flex 垂直居中靠 align-items 就不成立了 —— 那时候垂直方向归 justify-content 管。换个方向，同样两句话的效果正好对调。

gap 间距同时管行与列，一条 gap 顶 row-gap 与 column-gap 两条，而且不会像 margin 那样在两端多出一截空白。行列想给不同的值时写两个数，前面是行间距、后面是列间距。

flex 简写展开：1 与 auto 差在哪

flex: 1 是什么意思？它是 flex: 1 1 0% 的简写 —— 可以变长、可以收缩、起点按 0 算，三件事写在同一行里。 flex 简写会一次改掉三个属性，漏写的那两项按简写规则补默认值，而不是保持原样 —— 这是它最容易坑人的地方。最关键的一条是：flex: 1 展开之后 flex-basis 是 0%，不是 0、更不是 auto。起点归零意味着容器的全部空间都当作剩余空间来分，所以结果是严格等分；而 flex: auto 先按内容打底再分剩下的，内容长的项目最后就更宽。

flex-grow 与 flex-shrink 怎么分空间

长和缩是两套不对称的规则，混为一谈是中文教程里最普遍的一处错误。flex-grow 比例直接决定分多少，与项目本身多宽无关： 因子 1 比 3 的两个项目在 480px 容器里分到 120px 与 360px。flex-shrink 加权用的是 flex-basis —— 收缩量正比于 shrink 乘以基准尺寸，所以基准 400px 与 100px、shrink 都写 1 的两个项目，收缩量是 4 比 1 而不是各让一半，最终落在 384px 与 96px。

第三行那条最少见也最容易漏：两个项目各写 flex-grow: 0.3 时，因子之和只有 0.6，浏览器只会分走自由空间的 60%， 剩下的原样留白。本页的尺寸表会把每个项目的起点、假设尺寸、最终尺寸与「为什么停在这里」逐行列出来， 不用再靠肉眼猜。

min-width auto 陷阱：项目为什么缩不下去

这条是中文社区问得最多、答得最含糊的一个 flex 问题。flex 项目上的 min-width 初始值不是 0 而是 auto，它会解析成内容的最小尺寸：内容撑得住的项目根本缩不下去，于是 flex-shrink 看起来「不生效」，容器被撑破。 flex 项目溢出容器时，先怀疑这一条。

align-content 只有换行之后才生效

align-content 不生效的原因只有一个：容器没换行。它管的是多行之间怎么分布，单行容器根本没有「行与行之间」可言， 写了自然没反应。flex-wrap 换行之后才有多行，这时候 align-content 才开始起作用；只想调单行里每个项目的对齐， 要找的是 align-items。

单个项目要跳出队形就写 align-self，它只影响自己，其余项目仍然听容器的。本页在 flex-wrap 是 nowrap 时会把 align-content 下拉置灰并写明原因，但模型里仍然保留你选的值，切回 wrap 立刻恢复。

flex 布局最后一行为什么会被拉开

换行之后每一行都各自套用同一套 justify-content 规则，最后一行项目少、空隙自然被拉得很大。这不是 bug， 而是 space-between 的定义如此。flex 最后一行左对齐的稳妥做法有三条：给项目定宽再用 gap 控间距、补几个宽度相同但不可见的占位元素凑满一行、或者换成 Grid 来做真正的二维对齐。

flex-basis 和 width 同时写谁说了算

主轴方向上 flex-basis 优先，width 只在 flex-basis 取 auto 时才接管。这就是为什么同时写了 width 和 flex: 1 的项目最后并没有按 width 那个数排 —— flex: 1 里的 basis 是 0%，width 早就被绕过去了。 交叉轴方向不受影响，那边还是 height 说了算（竖排时反过来）。

flex-basis 百分比按容器主轴内尺寸解析，横排看容器宽、竖排看容器高。换个容器尺寸，同一个百分比算出来的像素就不同， 所以本页给的等效像素一律标注为「按当前预览容器估算」，不宣称精确。想要一个完全不随容器变的起点，直接写像素值。

order 只改视觉顺序，不改朗读顺序

order 属性只改视觉顺序，读屏软件与键盘 Tab 焦点仍按 HTML 里的顺序走。用它做纯视觉的微调没问题， 但拿它来「调整内容顺序」就会让键盘用户和读屏用户拿到一个与视觉完全对不上的页面。真要换顺序， 请改 HTML 里的元素顺序 —— 本页每张项目卡片上的上移与下移按钮改的就是 DOM 顺序，与 order 是两条不同的路径。

另外 order 的排序是稳定的：order 相同的项目仍按文档顺序排，负数排到 0 之前。本页的尺寸表里会同时给出每个项目的 HTML 顺序编号与当前视觉位次，方便对照。

Tailwind flex 类名对照表

下表的类名取自 Tailwind CSS v3.4 的默认主题，由本站的数据表现算渲染。 本工具的 Tailwind 标签按官方类名优先输出，档位对不上时退回任意值写法（例如 13px 的间距会写成方括号形式）， 并在下方逐条列出是哪几条走了任意值 —— 不会硬套一个最接近的档位悄悄改掉你的数值。

间距、flex-basis 与固定尺寸走的是 Tailwind 的 spacing 档位，所以 16px 会写成一档而不是方括号。 Tailwind 各大版本之间类名与档位都调整过，这张表带着版本号看才有意义，其他版本请自行核对。

flex 布局常用配方与本工具的边界