Flexbox 布局游乐场
免费线上 Flexbox 布局游乐场。切换 flex-direction、justify-content、align-items、flex-wrap，实时看盒子重排，再复制 CSS。
Flexbox 布局游乐场
免费线上 Flexbox 布局游乐场。切换 flex-direction、justify-content、align-items、flex-wrap，实时看盒子重排，再复制 CSS。
关于 CSS flexbox
Flexbox 在做什么
Flexbox 把一组盒子沿单一方向排开，并在它们之间分配剩余空间。在容器设 display: flex，它的直接子元素就成为 flex 子项，排成一行（或一列），能一起伸缩与对齐。本工具把每个属性都做成按钮，让你立刻看见效果。
主轴与交叉轴
flex-direction 决定主轴：row 是由左到右，column 是由上到下。justify-content 沿主轴对齐子项，align-items 则沿垂直的交叉轴对齐。一旦知道某个属性作用在哪条轴上，justify-content 和 align-items 就不再混淆。
常见问题
关于这个主题的常见疑问与实用解答。
justify-content 和 align-items 有什么差别？
justify-content 沿主轴（由 flex-direction 决定的方向）对齐子项；align-items 沿交叉轴（与主轴垂直）对齐。在这里把 flex-direction 在 row 与 column 间切换，看哪一个会移动盒子。
flex: 0 1 auto 是什么意思？
flex 是 flex-grow、flex-shrink、flex-basis 依序的简写。0 1 auto 表示子项不放大、空间不足时可缩小、初始大小取内容尺寸。选一个盒子调这三个值，就能在生成的 CSS 看到这个简写。
我的数据会被发送到服务器吗？
不会。所有计算完全在你的浏览器中执行，你输入的任何内容都不会离开你的设备。