Flexbox 布局编辑器

什么是 Flexbox 可视化编辑器？#

Flexbox 是 CSS 里专门用来”沿一个方向排布元素、再把剩余空间分配出去”的布局引擎。它解决的都是过去靠浮动、负 margin、反复试错才能搞定的老问题——“怎么把这块东西垂直居中？""怎么让这三列等高？""怎么把其中一个元素推到最右、其余留在左边？“。理解它之后，你几乎每页都会用到；可没理解之前，光那些属性名（justify-content、align-items、flex-grow）就够新手绊脚的——规范把日常英语单词塞进了极其精确的布局语义里，字面意思常常骗人。

本页就是一个实时 Flexbox 操练场。左侧侧边栏调容器属性和单个子项的覆盖值，右侧立刻画出效果，并把你调出来的 CSS 原样写出来、可直接复制走。目的只有一个：别再猜哪个值管什么事，改一下立刻看到效果，然后把有效的规则抄走。

怎么使用#

整个界面分成左侧控制区和右侧预览 + CSS 输出两块。

1. 设置容器。 用侧边栏的下拉框：
   • 方向（Direction） —— row、row-reverse、column、column-reverse。
   • 主轴对齐（Justify content） —— 沿主轴分配剩余空间：flex-start、center、flex-end、space-between、space-around、space-evenly。
   • 交叉轴对齐（Align items） —— 沿交叉轴排列子项：stretch、flex-start、center、flex-end、baseline。
   • 换行（Wrap） —— nowrap 挤在一行；wrap、wrap-reverse 允许子项流到新的一行。
   • 多行对齐（Align content） —— 只在开启换行后出现，用来安排换行后的”行与行之间”的间距。
   • 间距（Gap） —— 0 到 64 px 的滑块，实时数值显示在标签旁边。
2. 管理子项。 在子项标题下，点 + Add item 新增一个 flex 子项。每个子项都能调 grow（伸展）、shrink（收缩）、basis（基准尺寸）、order（顺序）、align-self（单独对齐，覆盖容器的 align-items）。用每行自带的 删除 按钮删掉子项。
3. 盯住预览。 右侧大框是一个真正的 flex 容器，任何改动都立刻重绘。
4. 复制 CSS。 预览下方就是生成的规则块，点 复制 取走。当所有子项取值相同时，只输出一个 .item 块；只要有一个子项不同，输出就切换成每个子项一个 .item:nth-child(N) 块，确保每条覆盖都不含糊。

主要特性#

• 容器属性和子项属性一站式齐全。 Flexbox 该有的一个不藏——flex-direction、两条对齐轴、换行、gap，以及每个子项的 grow/shrink/basis/order/align-self 全部实时可调。
• 输出又对又短。 只有真正换行时才输出 align-content（单行下它没用）；子项全部相同时塌缩成一个块；order、align-self 只在非默认值时才出现。生成的是能复现当前效果的最短规则。
• flex 简写写法规范。 每个子项都序列化成 flex: <grow> <shrink> <basis> —— 标准的三值写法，避开了简写省略值带来的那些反直觉默认行为。
• basis 有校验。 输入 auto、0、200px、50%、10rem 都接受；非法的 basis 会被标红并回退成 auto，而不是悄悄生成一段坏 CSS。
• 预览强制从左到右。 Flexbox 的 row 在规范上就是从左到右的语义，所以预览无论页面什么语言都钉死成 LTR——你在这里看到的就是样式表真正会呈现的样子。

实例演示#

一个经典布局：一行页眉，左边 logo 贴左、中间标题吃掉剩余空间、右边操作按钮贴右，三者用固定间距排开。

• 方向：row
• 主轴对齐：space-between
• 交叉轴对齐：center
• 换行：nowrap
• 间距：16px
• 子项：三个，中间那个 grow 设成 1 让它吃掉剩余空间，其余两个保持默认 flex: 0 1 auto。

生成的 CSS：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

因为第二个子项要伸展、其余两个不要，所以输出正确地拆成了三个 nth-child 块。这段 CSS 套进任何项目，logo 就贴左、按钮贴右、标题填中间——不用浮动、不用算 margin。

常见问题#

justify-content 和 align-items 到底谁管谁？#

justify-content 永远作用在主轴上（也就是 flex-direction 设定的方向——row 时是水平，column 时是垂直）。align-items 永远作用在交叉轴上（与主轴垂直的那条）。所以在 row 下，justify-content 管左右间距，align-items 管上下对齐；方向翻成 column，两者就互换角色。记住一句”justify 管主、align 管交叉”，就能避开 Flexbox 最常见的犯晕点。

flex-grow 到底什么时候才起作用？#

只有在有剩余空间可吃时才起作用。三个子项各设 flex-grow: 1，容器又比它们需要的总宽更宽，那多出来的空间就被平均分成三份补进去；容器正好被填满，谁也不长。把 flex-grow 设成 0（默认值），这个子项就拒绝伸展，把空间让给兄弟们。flex-shrink 是镜像：空间不够时，它决定谁先让步。

为什么我的 gap 没生效？#

通常三个原因：子项被设了固定宽度、把容器完全填满了（没有余地放间距）；flex-wrap: nowrap 逼着子项溢出，而不是按间距换行；子项自带 margin，视觉上盖住了 gap。这里的滑块到 64 px 封顶；要是需要更大，底下的属性本身就接受任意长度，复制走 CSS 后在自己的文件里把 gap 调大即可。

输出用了 nth-child，我能换成 class 吗？#

当然。之所以输出 .item:nth-child(N)，是因为子项各不相同时，这种写法能跟预览一一对应、毫无歧义。在真实代码里，把它们换成你自己的 class（.logo、.title、.action）就行——里面的声明一行都不用改。当所有子项都相同时，工具本来就会输出一个共享的 .item 块，改个名一次到位。