🧩 Flexbox 布局生成器

Flexbox 是现代 CSS 布局的核心。选择几个关键属性，立即得到对应的 display:flex CSS，并看到 1/2/3 三个项目的实时排列效果。

flex-direction 主轴方向

justify-content 主轴对齐

align-items 交叉轴对齐

flex-wrap 换行

gap 间距（px）

⚠️ 使用说明与注意事项

属性	常用取值	说明
flex-direction	row / column / row-reverse / column-reverse	主轴方向
justify-content	flex-start / center / flex-end / space-between / space-around / space-evenly	主轴对齐
align-items	stretch / flex-start / center / flex-end / baseline	交叉轴对齐
flex-wrap	nowrap / wrap / wrap-reverse	是否换行
gap	任意长度（如 12px）	项目间距

提示：要让单个项目在交叉轴居中可用 align-self；要控制项目伸缩用 flex: 1 或 flex-grow/shrink/basis。