Flexbox演练场
可视化体验CSS Flexbox。
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
CSS Flexbox交互式演练场
CSS Flexbox（弹性盒布局）是现代Web开发中最强大和最常用的布局系统之一。它允许以灵活且可预测的方式在容器内分配空间和对齐元素，即使元素大小未知或动态变化。Flexbox极大地简化了以前需要使用float或positioning等复杂技巧的设计任务。
我们的Flexbox演练场让你可以直观地体验弹性容器的所有属性：flex-direction（主轴方向）、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-wrap（溢出行为）和gap（元素间距）。你还可以配置每个项目的属性：order、flex-grow、flex-shrink和align-self。
预览实时更新，让你立即看到每个属性如何影响元素分布。你可以添加和删除项目，点击选中任何项目编辑其单独属性，最后复制生成的CSS代码直接用于项目。这是学习Flexbox或快速原型布局的完美工具。
常见问题
什么时候用Flexbox还是Grid？
Flexbox适合一维布局（单行或单列），如导航栏、水平卡片列表或容器内元素对齐。CSS Grid更适合二维布局（同时包含行和列），如整页布局或复杂的图片画廊。
flex-grow有什么作用？
flex-grow定义一个项目可以增长多少以填充容器中的可用空间。默认值0表示项目不增长。如果一个项目的flex-grow为1，另一个为2，则第二个的增长量是第一个的两倍。
所有浏览器都兼容吗？
是的，CSS Flexbox多年来在所有现代浏览器中都有完整支持。Chrome、Firefox、Safari、Edge和Opera无需前缀即可支持。只有Internet Explorer 10-11有部分且存在bug的实现。
想了解更多？ 阅读我们的完整指南 →