Toolit你的日常工具箱

Flex 布局生成器

代码与文本本地处理

可视化搭建 CSS Flexbox 布局，支持方向、换行、对齐、间距与项目属性控制，一键复制干净的 CSS 和 HTML 代码。

预设

容器设置

项目

3

选中项目 · 项目 1

预览

项目 1
项目 2
项目 3

点击预览中的方块即可选中并调整对应的项目属性。主轴由 flex-direction 决定，justify-content 沿主轴分布，align-items 沿交叉轴对齐。

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

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

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

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

什么是 Flex 布局生成器？

Flex 布局生成器是一款可视化工具，让你无需手写代码即可搭建 CSS Flexbox 布局。你在左侧面板里调整容器属性和项目属性，右侧预览会实时呈现真实效果，对应的 CSS 和 HTML 随时可以复制到你的项目中。

方向、换行、主轴分布、交叉轴对齐、间距，以及每个项目的伸展比例与基准尺寸，全部集中在一个面板里。从经过验证的预设或默认布局开始，一边操作一边读到干净、符合标准的代码——完全不必死记 Flexbox 的语法细节。

它适合所有与布局打交道的人：前端开发者可以快速搭建导航栏、卡片行等常见结构，设计师能把布局想法转化为真正的 CSS 代码，学习者能直观理解主轴与交叉轴是如何影响排布的，任何想要整洁 Flex 代码却不愿从零手写的人也能直接使用。

隐私优先设计：生成器完全在你的浏览器中运行。你的布局配置以及生成的代码绝不会上传到服务器。

如何使用 Flex 布局生成器

1

选择起点

从八个预设中挑选一个——水平居中、垂直居中、两端对齐、等分一行、导航栏、卡片换行、侧边栏布局或纵向表单。每个预设都会立即配置好方向、对齐、间距与项目数量。

2

配置容器

设置 flex-direction 决定主轴方向，flex-wrap 控制是否换行，再用 justify-content、align-items 和 align-content 调整分布与对齐，最后用行间距、列间距设定 gap。

3

调整项目

用加减按钮增减项目数量，点击项目列表或预览里的方块来选中它，然后逐项设置 flex-grow、flex-shrink、flex-basis、order 和 align-self。

4

查看预览

右侧预览区实时呈现真实的 flex 布局，方向、间距、对齐与项目属性的每一次改动都会立刻反映到画面上。

5

复制代码

在 CSS 与 HTML 选项卡之间切换查看生成的输出，然后点击复制，把可见的代码发送到剪贴板。

功能特性

实时可视化预览

预览区就是真正的 flex 容器，所有改动即时呈现，无需反复刷新页面去猜效果。

八种常用预设

水平居中、垂直居中、两端对齐、等分一行、导航栏、卡片换行、侧边栏布局与纵向表单，一键套用。

完整的容器属性

flex-direction、flex-wrap、justify-content、align-items、align-content 与 gap 全部可调，覆盖 Flexbox 的一维布局需求。

逐项精细控制

每个项目都能单独设置 flex-grow、flex-shrink、flex-basis、order 与 align-self，实现不等的分配比例。

自由文本 basis

flex-basis 可以填 auto、content、0、任意 px 值或百分比，也可以直接使用 minmax() 之类的函数写法。

快捷取值建议

basis 输入框下方提供常用取值按钮，auto、content、25%、50% 等一键填入，省去手动输入。

干净的 CSS 与 HTML 输出

生成一个可直接使用的 .flex-container 以及与之匹配的项目类，并在 HTML 选项卡上给出对应的标记结构。

一键复制

用一个按钮把可见的 CSS 或 HTML 复制到剪贴板，可直接粘贴到你的项目中。

默认项自动省略

只有非默认值的属性才会出现在生成的 CSS 里，输出保持简洁，不带冗余噪音。

常见问题

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

justify-content 沿主轴分布项目，align-items 沿交叉轴对齐项目。主轴由 flex-direction 决定：当方向是 row 时主轴水平，切换成 column 后主轴就变成垂直。想让一个元素在两个方向都居中，需要同时设置 justify-content: center 和 align-items: center。

为什么切换成 column 后，justify-content 看起来像是换了位置？

属性并没有互换，只是主轴随 flex-direction 改变了。flex-direction: column 时 justify-content 控制垂直方向，align-items 控制水平方向。这是 Flexbox 最容易误解的一点，预览区会直观地展示这种变化。

align-content 什么时候才有效？

align-content 控制的是多行之间的空间分布，只有在 flex-wrap 设置为 wrap 或 wrap-reverse 且容器确实产生了多行时才生效。单行容器调整 align-content 不会有任何视觉变化。

flex-grow 为什么不生效？

flex-grow 只负责分配「剩余空间」。如果容器没有剩余空间（项目已经填满，或者容器本身没有确定的主轴尺寸），就没有空间可分配，grow 再大也不会改变结果。

flex-shrink 和 min-width 有什么坑？

flex-shrink 默认是 1，空间不足时所有项目都会等比收缩。如果某个项目不应该被压缩，把 flex-shrink 设为 0。另外 flex 项的 min-width 默认是 auto，会阻止项目收缩到内容宽度以下，需要时把它改成 0（纵向滚动场景里对应的是 min-height: 0）。

order 会影响键盘和读屏顺序吗？

不会。order 只改变视觉上的排列顺序，DOM 顺序、屏幕阅读器读取顺序和 Tab 键顺序都不受影响。过度依赖 order 会让键盘导航与视觉顺序错位，谨慎使用。

gap 和给子项加 margin 有什么区别？

gap 只在项目之间产生间距，不会在容器的外缘留下空白；给子项加 margin 则可能让第一个或最后一个项目也带上外边距。在 Flex 布局中优先使用 gap 更干净。

Flexbox 和 CSS Grid 该怎么选？

Flexbox 是一维系统，沿单行或单列排布元素，适合导航栏、工具栏、卡片行这类单轴场景；CSS Grid 是二维系统，可以同时控制行列，适合整页结构。两者经常配合使用——外层用 Grid 分区，区内用 Flex 排布。

我的数据会被保存吗？

不会。一切都在你的浏览器中运行，任何布局配置以及生成的代码都不会发送到服务器。

相关工具