🎨 CSS Flex 布局编辑器
可视化调整 Flex 容器属性 | 实时生成 CSS 代码 | 快速掌握弹性布局
⚙️ 容器属性
flex-direction
row (水平正向)
row-reverse (水平反向)
column (垂直正向)
column-reverse (垂直反向)
flex-wrap
nowrap (不换行)
wrap (换行)
wrap-reverse (反向换行)
justify-content (主轴对齐)
flex-start (起始)
flex-end (末尾)
center (居中)
space-between (两端对齐)
space-around (环绕间距)
space-evenly (均匀间距)
align-items (交叉轴对齐)
stretch (拉伸)
flex-start (起始)
flex-end (末尾)
center (居中)
baseline (基线)
gap (间距 px)
10
px
容器内边距 (px)
16
px
📦 子项属性
子项宽度 (px)
100
px
子项高度 (px)
70
px
子项数量
4
个
📱 实时预览
📋 生成的 CSS 代码
复制 CSS 代码
📖 使用说明
调整左侧属性，右侧预览区域和 CSS 代码会实时更新。
支持 flex-direction、flex-wrap、justify-content、align-items、gap、padding 等容器属性。
子项宽度/高度/数量可调，便于观察换行效果。
生成的 CSS 代码可直接复制到项目中使用。