Flex布局生成器 - 可视化 CSS 布局工具

带实时预览的 Flex 布局生成器

Flex 布局生成器是一款可视化工具，无需从零手写代码就能帮你搭建 Flex 布局。点击按钮、拖动控件来调整容器和项目，实时看到布局变化，再把干净的 CSS 直接复制进你的项目。

Flexbox 是最强大的 CSS 布局方案之一，但 justify-content、align-items、flex-wrap 这些属性，加上 flex-grow、align-self 等单个项目控制，要记牢都得花时间。这个生成器让你可视化地尝试，立刻看到结果，所以它既适合初学者理解每个属性的作用，也适合开发者快速搭建布局原型，还适合设计师在交付前探索方案。

隐私设计：生成器完全在你的浏览器中运行。你的布局设置和生成的 CSS 永远不会上传到服务器。

如何使用 Flex 布局生成器

设置容器

在容器区域设置父级的 Flex 属性：flex-direction（行或列）、flex-wrap、主轴上的 justify-content、交叉轴上的 align-items、用于换行的 align-content，以及行与列的 gap。

管理项目

用添加项目和删除项目设置所需的方块数量，最多 12 个。点击彩色标签，或直接在预览区点击某个项目，即可选中要编辑的那一个。

自定义选中的项目

针对选中的项目，调整 order、flex-grow、flex-shrink 和 flex-basis 来控制尺寸，用 align-self 覆盖容器设置，并指定具体的宽度、高度和内边距。再用背景色和圆角对它做可视化美化。

复制生成的 CSS

CSS 会自动更新，且只包含与默认值不同的属性，让输出保持精简。点击复制把代码送到剪贴板，或点击重置恢复为四个默认项目。

功能特性

完整的容器控制

通过带标签的按钮组设置全部六个容器属性——flex-direction、flex-wrap、justify-content、align-items、align-content 和 gap，按钮上直接显示真实的 CSS 值。

单个项目的 Flex 属性

选中任意项目，即可独立于容器调整 order、flex-grow、flex-shrink、flex-basis 和 align-self。

可视化项目样式

为每个项目设置背景色、圆角、明确的宽高和自定义内边距，让预览效果与你的设计相符。

实时预览

每次改动都立即生效。容器以虚线边框显示，每个项目都有自己的颜色，方便辨认。

点击选中项目

点击列表里的标签，或直接在预览区里点击项目，即可选中要编辑的项目。

添加或删除项目

用一到十二个 Flex 项目搭建布局，随时调整数量。

干净的代码输出

生成的 CSS 只列出非默认属性，容器规则归于 .container 选择器，单个项目的覆盖归于 .item-N 选择器。

可调节的容器尺寸

按百分比改变预览宽度、按像素改变高度，模拟不同视口，测试布局如何响应。

一键复制

一键把可直接使用的 CSS 复制到剪贴板，再粘贴进你的样式表。

重置为默认值

一键恢复所有设置——四个项目、无自定义属性，容器宽度 100%、高度 300px。

常见问题

justify-content 和 align-items 有什么区别？

justify-content 让项目沿主轴对齐——行布局时是水平方向，列布局时是垂直方向。align-items 让项目沿交叉轴（相反方向）对齐。在行布局中，justify-content 负责水平间距，align-items 负责垂直对齐。

怎么用 Flexbox 让 div 居中？

在容器上把 justify-content 设为 center，把 align-items 设为 center，就能让项目在水平和垂直方向都居中。在生成器里选这两个值，预览会立刻把项目居中。

align-content 在什么时候生效？

align-content 只有在 flex-wrap 设为 wrap（或 wrap-reverse）、项目跨多行时才生效。它控制这些行如何沿交叉轴分布。只有一行时它没有可见效果。

flex-grow 和 flex-basis 有什么区别？

flex-basis 设置项目在分配空间之前的初始尺寸，而 flex-grow 决定它占据多少剩余空间。一个 flex-basis: 100px 且 flex-grow: 1 的项目，会从 100px 起始，再伸展填满可用空间。

Flexbox 和 CSS Grid 有什么区别？

Flexbox 是一维系统，沿单一轴线（行或列）排列项目，适合工具栏、导航以及把元素排成一行对齐。CSS Grid 是二维的，可同时按行和列排列项目，更适合整页布局。这个生成器专注于 Flexbox。

为什么生成的代码不包含每一个属性？

生成器只输出与 CSS 默认值不同的属性，从而让代码干净精简。例如 flex-direction 保持为 row（默认值）时，它就会从输出中省略。

生成的 CSS 能直接用在我的项目里吗？

可以。这份 CSS 可直接用于生产环境——复制后把类名（.container、.item-1 等）应用到你的 HTML 上即可。你也可以把选择器重命名，以符合自己的命名规范。