CSS Flex 布局编辑器

可视化调整 Flex 容器属性，实时预览效果并生成 CSS 代码

Flex 属性配置

选择容器属性并调整子项数量，预览区实时反映效果

flex-direction（主轴方向）

justify-content（主轴对齐）

align-items（交叉轴对齐）

flex-wrap（换行方式）

gap（间距）: 10px

子项数量: 3

实时预览

虚线框为容器，方块为子项；stretch 时子项高度会拉伸

CSS 代码

// CSS 代码将在这里显示...

使用说明

选择 flex-direction（主轴方向）：row 横向 / column 纵向 / 反向排列
选择 justify-content（主轴对齐）：flex-start / center / space-between 等
选择 align-items（交叉轴对齐）：stretch / flex-start / center / flex-end / baseline
选择 flex-wrap（换行方式）：nowrap 不换行 / wrap 换行 / wrap-reverse 反向换行
拖动 gap 滑块调整子项间距（0-30px），拖动子项数量滑块调整 1-6 个子项
右侧预览区实时反映效果，底部代码区同步生成 CSS，点击"复制代码"即可使用

适用场景

页面布局：导航栏、卡片栅格、按钮组水平/垂直排列
居中布局：一行 flex+justify+align 完成任意方向居中
响应式排布：配合 flex-wrap 实现自适应换行卡片
学习参考：直观对比不同属性值的视觉效果差异
快速调试：可视化调整后直接复制代码到项目中

安全保障

本地处理：所有属性计算与代码生成在浏览器本地完成
隐私保护：不收集、不存储、不上传任何配置数据
无网络请求：操作过程不发起任何外部请求
免费使用：无需注册登录，打开即用

常见问题

justify-content 和 align-items 有什么区别？

justify-content 控制主轴方向上的对齐方式，align-items 控制交叉轴方向上的对齐。当 flex-direction 为 row 时，主轴是水平方向，交叉轴是垂直方向；当 flex-direction 为 column 时正好相反。建议修改 flex-direction 后观察预览区变化即可理解。

为什么 align-items: stretch 时子项高度会变化？

stretch（默认值）会让子项在交叉轴方向上拉伸填满容器。当 flex-direction 为 row 时，子项高度会被拉伸至容器高度；如果子项有明确高度，stretch 将失效。本工具预览区中的子项没有设置固定高度，所以会拉伸展示。

gap 属性的浏览器兼容性如何？

gap 属性在 Flex 布局中已被现代浏览器全面支持，Chrome 84+、Firefox 63+、Safari 14.1+、Edge 84+ 均可使用。如需兼容更老浏览器，可在子项上使用 margin 替代，或配合 Autoprefixer 自动处理。

space-between / space-around / space-evenly 有什么区别？

space-between：首尾贴边，中间间距相等；space-around：每个子项左右两侧各占一半间距，首尾与容器边距是中间间距的一半；space-evenly：所有间距完全相等，包括首尾与容器边缘的间距。建议切换三个选项对比预览效果即可直观感受。