Developer Tools
Web UtilitiesCSS Flexbox 练习场
可视化配置 CSS flexbox 容器和子项属性，实时预览效果并生成可直接使用的 CSS 代码，支持 flex-direction、justify-content、align-items 等所有属性。
预设
容器属性
子项属性
实时预览
1
2
3
容器 CSS
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}子项 CSS
.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}相关工具
关于 CSS Flexbox 练习场
使用方法
- 调整容器属性，如 flex-direction、flex-wrap、justify-content、align-items 和 align-content
- 添加最多 6 个 flex 子项，并使用 flex-grow、flex-shrink、flex-basis、align-self 和 order 独立配置每个子项
- 更改任何属性时实时预览布局效果
- 将生成的容器和子项 CSS 代码直接复制到您的项目中
- 使用预设快速探索常见的 flexbox 模式
常见使用场景
- 以交互方式学习 flexbox 布局属性
- 原型设计导航栏、卡片网格和侧边栏
- 调试复杂的 flexbox 对齐问题
- 为常见布局模式生成基础 CSS
- 向学生讲授 CSS flexbox 概念
常见问题
什么是 CSS Flexbox 练习场？
CSS Flexbox 练习场是一款交互式工具，让您可以可视化地配置所有 flexbox 容器和子项属性。任何更改都会即时显示在实时预览中，并自动生成可直接复制到项目中的 CSS 代码。
可以配置哪些容器属性？
您可以配置所有六个主要 flex 容器属性：flex-direction（row、row-reverse、column、column-reverse）、flex-wrap（nowrap、wrap、wrap-reverse）、justify-content（flex-start、flex-end、center、space-between、space-around、space-evenly）、align-items（stretch、flex-start、flex-end、center、baseline）、align-content（stretch、flex-start、flex-end、center、space-between、space-around）和 gap（像素值）。
每个 flex 子项可以配置哪些属性？
每个 flex 子项可以配置：flex-grow（子项占用多少额外空间）、flex-shrink（空间不足时子项的收缩量）、flex-basis（初始大小）、align-self（个别对齐覆盖）和 order（容器中的视觉顺序）。
可以添加多少个 flex 子项？
最多可以添加 6 个 flex 子项。点击'+ 添加子项'按钮添加更多子项。每个子项都有颜色编码，便于在预览和设置面板中识别。
如何选择和编辑特定的 flex 子项？
点击子项属性面板顶部的任意编号标签来选择该子项。也可以直接点击实时预览中的子项来选择它。被选中的子项将以彩色边框高亮显示。
什么是预设，如何使用它们？
预设是常见布局模式的现成 flexbox 配置：'居中行'将子项水平和垂直居中，'居中列'将子项垂直堆叠并居中，'间距均匀'均匀分布子项，'换行网格'使用 flex-wrap 让子项换行，'拉伸子项'使用 flex-grow 填充可用空间，'反向行'反转子项显示顺序。点击预设即可立即应用，然后可进一步自定义。
flex-grow 的作用是什么？
flex-grow 定义了当容器中有额外空间时，flex 子项相对于其他子项的增长量。值为 0 表示子项不会增长。值为 1 表示获取等份额外空间。值为 2 表示获取 flex-grow: 1 子项的两倍空间。
flex-shrink 的作用是什么？
flex-shrink 定义了当容器空间不足时，flex 子项相对于其他子项的收缩量。值为 0 防止子项收缩。值为 1（默认）表示按比例收缩。值为 2 表示收缩速度是 flex-shrink: 1 子项的两倍。
flex-basis 可以接受哪些值？
flex-basis 设置 flex 子项在分配空间前的初始主轴尺寸。接受：'auto'（使用子项的宽度或高度）、长度值如'100px'或'20%'、'content'（基于内容）或'0'（子项从零尺寸开始）。可以在输入框中输入任何有效的 CSS 值。
align-items 和 align-self 有什么区别？
align-items 是容器属性，默认应用于所有 flex 子项。align-self 可以为单个子项覆盖 align-items。例如，如果容器设置了 align-items: center，但某个子项设置了 align-self: flex-end，则除该子项外所有子项都将居中。
order 属性的作用是什么？
order 属性控制 flex 子项的视觉顺序而不改变 DOM 顺序。order 值较小的子项排在前面。默认值为 0。
如何复制生成的 CSS？
有两个复制按钮：一个用于容器 CSS，另一个用于全部 CSS。点击任意'复制 CSS'按钮将代码复制到剪贴板。