📐
Flexbox 生成器
可视化调节 Flex 容器属性,实时预览并生成 CSS 代码。
本地处理 · 不上传
加载工具中…
相关：Flexbox · flex布局 · CSS生成 · 弹性盒 · justify align
Flexbox 生成器通过可视化选项调整主轴方向、对齐与换行，实时看到子元素的排布变化，并输出对应的 CSS。理解 flex 各属性的最快方式就是拖着看。
使用步骤
- 选择主轴方向与换行方式
- 调整主轴与交叉轴的对齐
- 增减子元素观察效果
- 复制生成的 CSS
使用场景
- 做水平垂直居中的布局
- 设计导航栏与工具条的元素分布
- 实现等分或按比例伸缩的列
- 学习 flex 各属性的实际效果
小贴士
- justify-content 控制主轴、align-items 控制交叉轴。改了 flex-direction 后这两者的作用方向会互换，这是最容易混淆的一点。
- 水平垂直居中只需 `display:flex; justify-content:center; align-items:center` 三行，不必再用绝对定位加负边距那套老办法。
- flex 简写的第三个值 flex-basis 优先于 width。设了 `flex:1` 后再改 width 往往不生效，原因就在这里。
常见问题
justify-content 为什么没效果？
通常是主轴上没有剩余空间可分配。若子元素设了 `flex-grow` 已占满全部空间，对齐自然无从体现。也要确认容器本身有足够宽度。
flex: 1 是什么意思？
它是 `flex-grow:1; flex-shrink:1; flex-basis:0%` 的简写，效果是让所有设了它的子元素平分容器空间，忽略各自的内容宽度。
Flex 和 Grid 怎么选？
一维排布（一行或一列）用 Flex，二维布局（同时控制行和列）用 Grid。页面整体骨架常用 Grid，组件内部元素排布常用 Flex。
Flexbox 生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用Flexbox 生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。