CSS Flexbox 演练场
新调整 flex 属性，实时预览并复制 CSS。
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
可视化 flexbox 生成器，自动为你编写 CSS
这个 flexbox 生成器将 CSS 弹性盒子布局变成你可以直观看到的东西。无需猜测 justify-content 或 align-items 会产生什么效果——只需在带标签的控件上切换每个属性，实时预览会立即重新排列，然后复制简洁的生产就绪代码。完全在浏览器中运行，无需注册，不上传任何数据。
这是一个真正的 flexbox 实验场：包含可编辑子元素的真实 flex 容器、完整的容器和每个元素的控件、嵌套容器、可调整大小的响应式预览以及可分享的 URL。无论你是在学习 flexbox，还是快速构建导航栏、卡片行或居中的 Hero 区域，都能在几秒内获得精确的布局——以及对应的 CSS、Tailwind 或 Bootstrap 代码。
每个容器属性，配备实时预览
按照规范的方式控制容器。设置 flex-direction（row、row-reverse、column、column-reverse）选择主轴，justify-content 在主轴上分布元素，align-items 在交叉轴上对齐元素。开启 flex-wrap 让元素换行，使用 align-content 分布换行后的多行，并分别调整 行间距和列间距的值。
内置的轴向图例会在你更改 flex-direction 时，实时显示哪个方向是主轴、哪个是交叉轴，让 justify-content 和 align-items 之间的关系一目了然。这是一份通过动手实践来学习的 flexbox 速查表。
每元素控制：grow、shrink、basis、order 和 align-self
大多数生成器止步于容器。这个工具允许你点击预览中的任意元素并单独编辑：设置 flex-grow、flex-shrink 和 flex-basis（即 flex 简写），覆盖其 align-self，更改 order 以在不修改 HTML 的情况下重新定位元素。添加或删除元素，观察空间如何重新分配。
这让构建真实布局模式变得简单——固定宽度的侧边栏搭配弹性主列（flex: 0 0 240px 与 flex: 1）、单个居中元素，或使用 margin-left: auto 将页脚链接推到最右端。
嵌套 Flexbox 与响应式预览
真实布局会嵌套。任何元素都可以成为自己的 嵌套 flex 容器，拥有独立的方向、justify 和 align 设置——这正是嵌套 flexbox 生成器所需要的，用于构建包含标题行在内容上方的卡片，或工具栏嵌套工具栏。生成的代码也包含嵌套规则。
由于 flexbox 的核心是响应式行为，预览框是可调整大小的：拖动手柄或选择手机 / 平板 / 桌面宽度预设，观察元素在每个尺寸下如何换行和重新对齐。这是发布前确认响应式 flexbox 布局效果的最快方式。
复制为 CSS、Tailwind 或 Bootstrap——与其他工具的比较
切换输出选项卡以获取项目所需的格式。CSS 提供使用 flex 简写的简洁 .container 和每元素规则。Tailwind 将工具类——flex、flex-col、justify-between、items-center、gap-4、flex-1、order-2——写入可直接粘贴的 HTML 片段。Bootstrap 输出等效的 d-flex 工具类。只输出你实际更改过的属性，确保代码精简可读。
Flexbox.help 等其他可视化生成器只提供容器属性，跳过了每元素控件和嵌套容器。Tailwind 在线实验场不生成原生 CSS。这个工具支持三种输出格式，处理嵌套，并在加载后可离线使用——无需账户，免费使用，数据不离开你的浏览器。
Frequently asked questions
CSS 中的 Flexbox 是什么？为什么使用它？
Flexbox（CSS 弹性盒子布局）是一种一维布局模型，用于在单行或单列中排列元素并在它们之间分配空间。只需在父元素上添加一行——display: flex——其子元素就会变成 flex 项目，无需浮动或手动设置外边距即可对齐、分布和调整大小。它被广泛使用是因为它简化了常见任务：居中、等高列、导航栏、卡片行以及各种之前很难实现的布局。
如何使用 flexbox？
在容器元素上添加 display: flex，然后使用容器属性控制子元素——flex-direction（row 或 column）、justify-content（沿主轴的间距）、align-items（交叉轴上的对齐）、flex-wrap 和 gap。例如，.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } 将 logo 和链接排列成一行，垂直居中，分布在两端。
如何用 flexbox 居中一个 div？
将父元素设为 flex 容器，并在两个轴上居中：.parent { display: flex; justify-content: center; align-items: center; } ——这会将子元素精确放置在水平和垂直的正中央。给父元素设置一个高度（例如 min-height: 100vh 用于全屏居中）。这是完美居中单个元素的最简洁方式。
justify-content 和 align-items 有什么区别？
justify-content 沿主轴定位元素，align-items 沿交叉轴定位元素，而主轴由 flex-direction 决定。在默认的 flex-direction: row 下，justify-content 水平分布元素，align-items 垂直对齐元素。切换到 flex-direction: column，两者互换作用。工具中的实时轴向图例会在你更改方向时显示各轴的对应关系。
flex-grow、flex-shrink 和 flex-basis 是什么？
这是决定 flex 项目尺寸的三个每元素属性，通常组合写成 flex 简写。flex-basis 是分配剩余空间前的初始尺寸。flex-grow 控制元素扩展以填充剩余空间的比例（0 = 不扩展，1 = 占一份）。flex-shrink 控制空间不足时元素收缩的比例。常用的 flex: 1 表示所有元素平均增长。
如何让 flex 元素换行？
在容器上设置 flex-wrap: wrap，这样放不下的元素会换到新行而不是溢出或压缩。默认 flex-wrap 是 nowrap，强制所有内容在一行显示。开启换行后，给元素设置 flex-basis（如 flex: 1 1 200px）让每行整齐填满，并使用 align-content 分布产生的多行。
这个 flexbox 生成器免费且私密吗？
免费，无需注册。整个实验场在你的浏览器中运行——你的布局、生成的 CSS 和分享链接都在你的设备上构建，从不上传到服务器。页面加载后可加入书签并离线使用。无需创建账户，配置的布局数量没有限制。
Related tools
查看全部工具
新 颜色混合器
以任意比例混合两种颜色，并复制结果或任一中间色。
新 图片取色器
从图片中拾取任意颜色，并提取主色调色板为 HEX、RGB 和 HSL。
新 Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
新 Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
取色器与转换器
选取颜色并在 HEX、RGB、HSL 与 OKLCH 之间转换。
新 色彩对比度检查器
检查文字与背景颜色之间的 WCAG AA/AAA 对比度。