Developer Layout Utility
Flexbox Playground
可实时测试 justify-content、align-items、flex-direction、flex-wrap、gap、align-content 等属性，并立即生成 CSS 代码的 Flexbox 布局工具。
Flexbox 设置
设置 Flex 容器的方向、对齐方式、换行、间距和项目尺寸。
生成结果
根据当前 Flexbox 设置生成的 CSS 代码。
请先调整 Flexbox 设置，然后点击生成 CSS 代码按钮。
Flexbox 对齐方式比较
理解方向和轴的概念后，可以更快速地制作按钮组、卡片列表和导航布局。
控制主轴方向上的对齐方式。在 row 中负责横向对齐，在 column 中负责纵向对齐。
控制交叉轴方向上的对齐方式。可将项目放置在起点、居中、终点，或使用 stretch 拉伸。
当 flex-wrap 产生多行时，用于控制多行整体在交叉轴方向上的对齐。
帮助
什么是 Flexbox Playground？
Flexbox Playground 是一款开发者布局工具，可实时测试 Flexbox 属性并生成 CSS 代码。
适合用于制作按钮组、导航栏、卡片列表、标签列表、表单布局和管理后台 UI。
支持功能
- 设置 flex-direction、justify-content、align-items
- 设置 flex-wrap、align-content
- 调整 gap、padding、item count
- 调整 item width、item height、border-radius
- 应用常用 Flexbox 预设
- 实时预览、复制 CSS 代码或下载 CSS 文件
justify-content 和 align-items 有什么区别？
justify-content 控制主轴对齐，align-items 控制交叉轴对齐。根据 flex-direction 是 row 还是 column，主轴和交叉轴的方向会发生变化。
align-content 什么时候生效？
align-content 会在 flex-wrap 产生多行时控制多行整体的对齐。如果 Flex 布局只有一行，视觉差异可能并不明显。
什么时候使用 flex-wrap？
当项目数量较多或屏幕宽度较窄，需要换行时，可以使用 flex-wrap: wrap。它常用于标签列表、卡片列表和按钮组。
Flexbox 和 CSS Grid 应该如何区分使用？
Flexbox 适合一维方向的对齐和项目流动控制，而 CSS Grid 更适合同时设计行和列的二维布局。
生成的 CSS 可以直接使用吗？
可以。生成的代码是基础 Flexbox 布局 CSS。实际项目中使用时，建议同时检查父元素宽度、响应式断点和项目内部内容长度。