API 浏览器
Flex 网格 Playground

为了帮助你更好地理解 Flexbox,我们为你编写了一个交互式游乐场。创建网格,然后将值复制到项目中。

¥To help you understand the Flexbox better, we have written an interactive playground for you. Create your grid and then copy the values to your projects.

提示

活动子组件将具有蓝色索引。启用与结果下方列出的子类和子样式相关。

¥The active child will have a blue index. Being active relates to the Child Classes and Child Styles listed below the results.

Configure parent (container):
Resulting container classes:
fit row wrap justify-start items-start content-start
Configure children: 0 / 10
Where to applyWhat to apply
Container classes
fit row wrap justify-start items-start content-start
Child #1 classes
* none *
Child #1 styles
* none *