CSS Flexbox 生成器

这个 Flexbox 生成器让你以可视化方式搭建弹性容器——display、方向、换行、主轴分布、对齐和间隙，同时通过带 3 到 12 个编号项目的实时预览观察效果。你还可以覆盖单个项目，并复制容器及每个被改动项目的整洁 CSS。

主轴与交叉轴如何工作

每一个 flexbox 决策都相对两条轴。flex-direction 设定主轴，justify-content 沿主轴分配项目。align-items 和 align-content 作用于与主轴垂直的交叉轴。这就是为什么设置 flex-direction: column 看起来像交换了两个对齐属性：主轴现在变为垂直，因此 justify-content 控制上下位置，align-items 控制左右位置。

属性	作用轴	影响
justify-content	主轴	沿行或列方向的间距与位置
align-items	交叉轴	每个项目的单行对齐
align-content	交叉轴	换行后各行之间的间距（需启用换行）
gap	两轴	项目与行之间的固定间隔

实操示例：两端对齐的导航栏

常见页头左侧放 logo、右侧放一组链接，并垂直居中。选择：

• display: flex
• justify-content: space-between
• align-items: center

生成的 CSS 是：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

flex-direction、flex-wrap、align-content 和 gap 都没有出现，因为它们处于默认值，写出来也不会改变任何东西。如果你加一个 16 像素的 gap，输出就会多出一行 gap: 16px;。

实操示例：按比例分配项目尺寸

在预览中选中项目 2，把 flex-grow 设为 2，再选中项目 1 设为 1。在 600 像素的容器且没有 gap 的情况下，如果每个项目内容约 100 像素宽，剩余空间为 600 − 300 = 300 像素。它按 grow 系数成比例分配：项目 1 得到三分之一（100 像素），项目 2 得到三分之二（200 像素），因此它们的最终宽度大约为 200 像素和 300 像素。

输出只为你改动过的项目生成规则：

.item-1 {
  flex-grow: 1;
}

.item-2 {
  flex-grow: 2;
}

flex-shrink 和 align-self 没有出现，因为它们保持默认值。

为什么有些属性不出现在输出里

生成器会省略与 CSS 默认值相同的属性，因此复制出的代码块只包含真正改变布局的内容。display 总是会写出；flex-direction: row、flex-wrap: nowrap、justify-content: flex-start、align-items: stretch、align-content: stretch、零 gap、flex-grow: 0、flex-shrink: 1 和 align-self: auto 都会被省略。因此简短的代码块是一种特性，而不是某项设置丢失的信号。

Flexbox 适合什么，以及如何嵌套

Flexbox 沿单一轴分配项目，非常擅长组件：导航栏、按钮组、一排卡片、表单行，以及让单个子元素居中。它不适合作为需要行列同时在两维上对齐的整页网格的首选——那是 CSS Grid 的职责。一条实用法则：如果你在单一方向上排列项目并允许它们换行，用 flexbox；如果行和列必须同时对齐，用 grid。Flexbox 在线内对齐项目，grid 在整个容器范围内对齐轨道；混淆这两种思维模型正是大多数“为什么居中不了”的根源。

超越演示：嵌套与真实布局

预览只展示一个容器，但真实页面会层层嵌套。常见模式是用一个 flex 行作为页面外壳，每一列本身又是一个 flex 列。用 display: flex 搭建外层容器，把侧边栏和主区域当作项目，再用 display: flex; flex-direction: column 搭建内层列。生成的 .container 代码块会作用于任何带有该类名的元素，因此你可以把它粘贴到多个嵌套元素并调整选择器。

让项目填满高度

一个常见问题是项目为什么不拉伸到最高的兄弟元素。默认情况下 align-items: stretch 在交叉轴上正是这么做的，所以如果项目看起来偏矮，可能是内部子元素有固定高度，或者容器本身没有可分配的高度。给容器设一个明确高度，或对单个项目使用 align-self: stretch，通常就能解决。如果希望一个项目保持较矮而兄弟元素拉伸，选中它并把 align-self 设为 flex-start，而不要改动整个容器。

常见错误

• 在单行上使用 align-content。 没有换行时它什么也不做。加上 flex-wrap: wrap 并缩小预览，就能看到它生效。
• 忘记 flex-grow 只分配剩余空间。 如果项目已经填满容器，增大 flex-grow 也无法造出空间；你需要更大的容器或更小的项目。
• 给所有东西都设 flex-shrink: 0。 它能阻止项目被压扁，却可能把内容挤到容器边界之外，造成水平溢出。
• 以为类名会和你的标记一致。 输出使用 .container 和 .item-N；粘贴前请改成你真实的选择器。
• 误以为 gap 会给边缘留白。 gap 只在项目之间增加间隔，不会产生外侧呼吸空间。要靠容器的 padding 来实现。

相关工具

• CSS 盒阴影生成器 — 实时预览设计多层盒阴影。
• CSS 渐变生成器 — 为布局构建自定义 CSS 渐变。
• 配色方案生成器 — 为设计生成和谐的配色方案。