首页 / 设计素材 / Flex 布局生成

Flex 布局生成器

可视化生成 Flex 布局 CSS 代码

关于本工具

写 Flex 布局,主轴交叉轴那几个属性老调不对,刷新看效果也慢。这个工具用下拉框帮你设主轴、交叉轴、方向和换行的取值,实时预览排布,并吐出对应的 CSS 代码。做顶部导航、卡片流、表单分行排布的时候特别直观,调一下就能看到元素怎么挪。新手理解 Flex 也合适,边选边看比背文档快。生成完复制走直接用,不用再猜 justify 和 align 该填啥,改几个值就能贴合自己的版式,少走很多弯路。