CSS Flexbox生成器

通过实时预览可视化生成CSS Flexbox布局。

1
2
3
4

容器属性

#f0f0f0

点击预览中的项目来编辑其单独的flex属性。

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}
所有布局生成都在浏览器中进行。不会向服务器发送数据。

如何使用

  1. 1

    设置容器属性

    选择flex-direction、flex-wrap、justify-content、align-items和gap来控制布局。

  2. 2

    调整项目数量

    设置flex项目数量(1-12)，自定义容器高度和背景颜色。

  3. 3

    编辑单个项目

    点击预览中的项目来设置flex-grow、flex-shrink等属性。

  4. 4

    复制CSS

    生成的CSS实时更新。点击复制按钮将CSS复制到剪贴板。

常见问题

什么是CSS Flexbox？
CSS Flexbox是一种一维布局模型，用于在容器中分配项目间的空间。
何时用Flexbox vs Grid？
一维布局用Flexbox，二维布局用CSS Grid。
flex-grow是什么？
flex-grow控制有多余空间时项目相对其他项目增长多少。0表示不增长，1表示等分剩余空间。
数据安全吗？
是的。所有布局生成完全在浏览器中进行。不会向服务器发送数据。