design
免费
无需注册
二维码生成器
没有硬性限制，但非常长的字符串可能产生宽输出。使用宽度滑块来换行或限制输出。
正在加载工具…
关于此工具
以可视化方式配置Flexbox属性并即时获取生成的CSS。
使用方法
- 1 调整每个Flexbox容器属性——flex-direction、flex-wrap、justify-content、align-items、align-content和gap——实时查看5个彩色盒子的响应效果。点击任意单个盒子调整其自身的flex-grow、flex-shrink、flex-basis、align-self和order，然后一键复制完成的CSS。
- 2 第1步：使用左侧的容器面板设置方向、换行和对齐属性。
- 3 第2步：观察预览中的彩色盒子随每个属性更改而实时更新。
- 4 第3步：点击任意单个盒子将其选中，并在项目面板中调整其flex属性。