设计配色 · 排版打印

Flex 生成

可视化 flex 布局

✓本地处理 · 不上传 ✓免费 · 无需登录 ✓无次数限制累计 112 次使用

FLEX 生成

容器Container · flex 容器属性

display

flex-direction 主轴方向

flex-wrap 是否换行

justify-content 主轴对齐

align-items 交叉轴对齐

align-content 多行 · 仅 wrap 生效

间距Gap · 行 / 列间距

row-gap 行间距 10px

column-gap 列间距 10px

子项Items · 数量与单项属性

子项数量 count 5

在右侧预览中点击任一子项即可单独编辑其 flex 属性

未选中子项。点击右侧预览中的编号方块，可单独设置该子项的 flex-grow / shrink / basis / align-self / order。

预设Layouts · 一键套用

预览点击方块选中子项

容器宽度 width 100%

容器高度 height 260px

子项高度 变化以观察交叉轴

就绪 · 可视化 flex 容器 / 点击选中子项 / 实时导出 · 全程浏览器本地处理

第一节

关于本工具

About

在 CSS 里调 flex 布局，经常是改一个属性崩一排子元素，反复试错浪费时间。这个工具把父容器和子项的 flex 属性拆成下拉和滑块，每一项调整都实时渲染出 DOM 结构，并显示对应的 CSS 代码片段。所有计算和渲染都在浏览器本地完成，不向服务器发送任何数据——调试响应式布局、写组件前快速验证布局逻辑时直接打开页面即可。

使用场景

壹

导航栏间距调崩

设计师把顶部导航的『首页』『产品』『关于我们』四个菜单项用 flex 布局排成一行。加了一个『新闻』栏目后，所有间距全乱了——有的菜单挤成一团，有的间距大到换行。在工具里拖拽每个菜单项的 flex-grow 和 margin 值，实时看到每一项占用的空间比例，不用在代码里反复试错，十分钟锁定『justify-content: space-around + flex-basis: 20%』的稳定方案。

贰

卡片列表最后一行对齐

商品展示页每行放 4 张卡片，后台数据返回 11 件商品。最后一行只有 3 张卡片，默认 flex 布局会把它们左对齐，视觉上像缺了一块。用工具调『align-content』和『flex-wrap』，勾选『align-items: flex-start』并给每个卡片容器设置固定高度，让最后一行卡片保持与其他行相同的顶部对齐位置，避免『缺角感』。

叁

移动端按钮宽度自适应

用户用手机打开一个结算页面，『提交订单』按钮在 iPhone 12 上正常，在折叠屏上只显示一半文字。在工具里把按钮设为 flex 容器，给内部文字加上『flex-shrink: 0』防止被压缩，同时设置按钮最小宽度为 120px。拖拽不同屏幕宽度滑块，验证按钮在 320px 到 414px 之间都能完整显示『提交订单』四个字。

肆

侧边栏与主内容比例锁定

一个后台管理页面需要左侧 200px 的固定菜单栏，右侧内容区自适应填满剩余宽度。用 flex 布局时，菜单栏在宽屏显示器上显得太窄，在 1024px 笔记本上又挤占内容区。在工具里给菜单栏设『flex: 0 0 200px』，内容区设『flex: 1 1 auto』，并勾选『overflow: auto』。拖拽窗口宽度，确认菜单栏始终 200px 不变，内容区随窗口伸缩。

伍

多行标签折行后对齐

文章详情页的标签区有『前端开发』『CSS 布局』『Flexbox 实战』等 8 个标签，每行放 4 个。当某个标签文字过长（如『响应式设计原理与实践』）时，该行其他标签被迫换行，整个标签区参差不齐。在工具里给每个标签设置固定高度和『align-self: center』，并启用『flex-wrap: wrap』，让短标签在长标签换行后仍能保持垂直居中，视觉上整齐。

第二节

使用指南

Getting Started

使用步骤

1在左侧面板添加或删除 flex 子项，右侧画布同步更新子项排列与间距
2拖动子项顺序或调整「flex-grow」「flex-shrink」滑块，布局实时重排
3切换「flex-direction」「flex-wrap」下拉选项，观察主轴方向与换行变化
4点击「align-items」「justify-content」图标按钮，子项对齐方式即时生效
5调整「gap」数值或勾选「order」自定义，子项间距与排列顺序按设定更新

输入输出示例

输入	输出	说明
display: flex; flex-direction: row; justify-content: center; align-items: center;	子元素水平居中、垂直居中，排列方向为水平（行）。	常规：最常用的居中布局，验证 flex-direction、justify-content、align-items 三个核心属性的组合效果。
display: flex; flex-wrap: wrap; gap: 10px; 子元素宽度: 200px;	子元素宽度固定为200px，超出父容器宽度时自动换行，子元素之间间距为10px。	常规：响应式布局常用，验证 flex-wrap 与 gap 的配合，以及子元素固定宽度下的换行行为。
display: flex; flex-direction: column; justify-content: space-between; height: 400px;	子元素垂直排列，首个子元素贴顶部，最后一个贴底部，其余均匀分布。	常规：垂直方向上的间距分布，验证 flex-direction: column 时 justify-content 的效果。
display: flex; 子元素数量: 0;	父容器内无子元素，无任何布局效果。	边界：空容器场景，验证工具对无子元素情况的处理，避免报错或显示异常。
display: flex; flex: 1 1 auto; 子元素数量: 5; 父容器宽度: 300px;	5个子元素均分父容器宽度，每个子元素宽度为60px。	边界：flex: 1 1 auto 在子元素数量较多且容器宽度较小时，验证 flex-basis 与 flex-grow 的分配逻辑。
display: flex; align-items: stretch; 子元素高度未设置;	所有子元素高度自动拉伸至与父容器等高（若父容器有固定高度）或与最高子元素等高。	边界：align-items: stretch 的默认行为，验证子元素无高度时的拉伸效果，常见于卡片布局。
display: flex; flex-direction: row-reverse; justify-content: flex-end;	子元素从右向左排列，且紧贴父容器右侧。	易错：flex-direction: row-reverse 与 justify-content 的配合容易混淆，很多用户以为 flex-end 会从右开始，实际是方向反转后从右端开始排列。
display: flex; flex-wrap: nowrap; 子元素宽度总和 > 父容器宽度;	子元素不换行，宽度被压缩（默认 flex-shrink: 1），直到全部挤入父容器。	易错：默认不换行时子元素压缩行为，新手常误以为会溢出或自动换行，验证 flex-shrink 的默认值。

常见错误对照

1.主轴方向搞反，flex-direction 写成 column 却期望水平排列

✗ 错误flex-direction: column; /* 期望子元素水平排列 */

✓ 修复flex-direction: row;

flex-direction 决定主轴方向，row 是水平，column 是垂直。搞反后所有 justify-content 和 align-items 的效果也会互换。

2.flex-wrap 与 flex-direction 冲突，导致换行方向错误

✗ 错误flex-direction: row-reverse; flex-wrap: wrap; /* 期望子元素从左到右换行 */

✓ 修复flex-direction: row; flex-wrap: wrap;

flex-direction: row-reverse 会让主轴起点在右侧，wrap 换行时新行会出现在下方左侧，与直觉相反。要左到右换行就用 row。

3.justify-content: center 后忘记考虑溢出，内容被截断

✗ 错误justify-content: center; /* 子元素总宽 > 容器宽，中间部分可见，两边被截 */

✓ 修复justify-content: center; overflow: visible; 或改用 flex-start

justify-content: center 将子元素整体居中，溢出时左右两边均不可见。应检查容器是否设 overflow:hidden，或改用 flex-start 避免截断。

4.align-items: stretch 被 flex-basis 覆盖，高度失效

✗ 错误align-items: stretch; .child { flex-basis: 50px; } /* 子项高度仍为 50px */

✓ 修复align-items: stretch; .child { height: auto; }

stretch 仅在子项交叉轴尺寸为 auto 时生效。一旦显式设置 flex-basis（或 height），stretch 会被覆盖，子项按设定值排列。

5.flex 简写顺序写反，导致 flex-grow 被忽略

✗ 错误flex: 0 1 200px; /* 期望 flex-grow: 1 */

✓ 修复flex: 1 0 auto;

flex 简写顺序是 grow shrink basis，不能随意调换。写 flex: 0 1 200px 表示 grow=0，子项不会放大。要放大必须将第一个值设为 ≥1。

6.margin: auto 与 justify-content 混用，预期外的居中

✗ 错误justify-content: center; .child { margin-left: auto; }

✓ 修复justify-content: center; /* 去掉子项 margin */

margin: auto 在 flex 容器中会占据剩余空间，与 justify-content 冲突。同时使用会导致子项偏移，通常应只用其中一种方式控制对齐。

7.flex-basis 设百分比但父容器无固定宽，计算基准为 0

✗ 错误.parent { display: flex; } .child { flex-basis: 50%; }

✓ 修复.parent { width: 400px; } .child { flex-basis: 50%; }

flex-basis 百分比基于父容器主轴尺寸。若父容器未显式设宽（或高度），百分比基准为 0，子项尺寸异常。必须给父容器固定尺寸或 min-width。

8.order 值设太大，视觉顺序与 DOM 顺序完全脱节

✗ 错误.item1 { order: 10; } .item2 { order: 20; } .item3 { order: 5; }

✓ 修复.item1 { order: 1; } .item2 { order: 2; } .item3 { order: 0; }

order 默认 0，值越大越靠后。用大跨度值（如 10、20）难以维护，推荐使用 0、1、2 等小值，或仅对需要移动的项设 order，其余保持默认。

第三节

工作原理

How It Works

核心公式

flex-basis = content-width + padding-left + padding-right + border-left + border-right

变量说明

content-width元素内容区宽度，单位 px
padding-left左内边距，单位 px
padding-right右内边距，单位 px
border-left左边框宽度，单位 px
border-right右边框宽度，单位 px

示例

一个 flex 子项 content-width 为 200px，padding-left 10px、padding-right 10px，border-left 2px、border-right 2px：flex-basis = 200 + 10 + 10 + 2 + 2 = 224px。该值作为主轴初始尺寸参与剩余空间分配。

用户输入本地处理输出结果

第五节

常见问题

Q & A

问我拖拽了容器和项目，但预览区完全没变化，怎么回事？＋

答

最常见原因是没选中任何元素。Flex 布局的生效对象是父容器，如果你只拖拽了子项目（flex-item）而没有给父容器设置 display:flex，预览区不会有任何变化。请先点击画布上的容器（通常带虚线边框），右侧面板出现 '容器属性' 标签后再调整 flex-direction、justify-content 等。如果容器已选中但属性面板没变化，刷新页面重试。

问flex-wrap 换行后项目挤成一团，间距怎么调？＋

答

换行后项目间距由两个属性控制：行间距用 align-content（不是 align-items），列间距用 gap。很多用户只调了 justify-content 和 align-items，发现换行后项目紧贴在一起。正确做法：在容器属性里找到 align-content（选项有 flex-start、space-between 等），选 space-around 或 space-evenly 让行与行之间均匀分布；同时设置 gap 值（单位 px）控制项目之间的水平和垂直间距。

问我设置了 flex:1，为什么三个项目宽度不一样？＋

答

flex:1 是 flex-grow:1 的简写，表示剩余空间按比例分配，但前提是项目本身没有设置固定宽度（width）或 flex-basis。如果某个项目设置了 width:200px 或 flex-basis:300px，它的基础尺寸会被保留，剩余空间才会分配给其他项目。检查每个项目的属性面板：把 flex-basis 改为 0，再给所有项目统一设 flex:1，宽度就会完全相等。

问这个工具能直接生成我网页里的完整 CSS 代码吗？＋

答

可以。调整完布局后，点击右侧面板底部的 '复制代码' 按钮（或手动选取代码框内容），复制出来的 CSS 包含父容器和所有子项目的完整样式声明，直接粘贴到项目样式表中即可。注意：工具只输出 flex 相关属性（display、flex-direction、justify-content、align-items、flex-wrap、gap 等），不会生成背景色、边框、字体等无关样式。

问为什么我复制了代码，但网页上布局跟预览不一样？＋

答

通常两个原因：一是父容器没有设置明确的宽高。本工具预览区有固定尺寸（默认 600×400），但你的网页父容器可能宽度是 100% 或未定义，导致 flex 分配结果不同。建议给父容器加上 width:100% 和 height:auto 或具体高度。二是子项目里还有未清除的默认 margin/padding（比如 ul、p 标签自带 margin），重置子项目的 margin:0;padding:0 后再试。

问我想让第二个项目单独靠右，其他项目靠左，能实现吗？＋

答

可以，但不能在容器属性里统一设置。方法：选中第二个项目（点击预览区该项目），在右侧面板找到 'align-self' 或 'margin-left:auto'。align-self 设为 flex-end 会让该项目在交叉轴（默认垂直方向）上单独靠下；如果想在主轴（默认水平方向）上靠右，给第二个项目加 margin-left:auto，其他项目不加，它就会自动推到最右边。这是 flex 布局的常用技巧。

问这个工具支持响应式断点吗？比如手机和桌面不同布局？＋

答

不支持自动生成媒体查询。本工具是纯可视化拖拽，所有属性调整对应一个固定尺寸的容器。如果需要响应式布局，建议在电脑上调整好一套布局后，手动复制代码，再在 CSS 里用 @media 查询覆盖不同屏幕下的 flex-direction、flex-wrap 等属性。工具本身不提供断点切换预览，但可以手动调整预览区宽度（拖拽右侧边栏）模拟不同屏幕尺寸。

问我调了半天，结果不小心点了刷新，布局全没了，有保存功能吗？＋

答

没有自动保存或历史记录功能。所有调整结果只在当前浏览器会话中生效，刷新页面会重置为初始状态。建议在调整过程中随时点击 '复制代码' 保存当前状态，或者用浏览器自带的 'Ctrl+S' 保存整个页面（但下次打开仍需重新调整）。后续版本可能会加入 localStorage 自动保存，当前请养成及时复制代码的习惯。

问为什么我设置了 order 属性，项目顺序没变？＋

答

order 属性默认值为 0，数值越小排越前，但只对同一父容器内的 flex 项目生效。检查两点：一是确认所有项目都在同一个父容器下（没有嵌套其他 flex 容器）；二是 order 值设置后，预览区需要手动触发重排——点击画布空白处再点回容器，或者修改其他任意属性（如 gap 值加 1px 再改回）让页面重新渲染。如果还不行，用 '重置' 按钮清空后重试。

隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。