🧩 Flexbox 布局生成器

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

📐 工作原理与说明

本设计工具基于通用设计规范与算法，纯前端处理，数据不上传。工具名称：Flexbox 布局生成器。

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）

项目间距

📚 深度解析：Flexbox 布局生成器

核心属性

父容器 display:flex；justify-content 控制主轴（横排时左右）对齐，align-items 控制交叉轴（上下）对齐。flex-direction: column 切换为纵向排列。

垂直水平居中

display:flex; justify-content:center; align-items:center; 是经典的「子项绝对居中」写法，比老式 margin:auto 更可靠。

换行

flex-wrap: wrap 让子项空间不足时换行；子项 flex: 1 等分剩余空间，flex: 0 0 200px 固定 200px 不伸缩。

Flex 和 Grid 怎么选？: Flex 适合一维（一行或一列）的弹性排列；Grid 适合二维（行列交叉）的复杂网格。两者常组合：Grid 划大区，Flex 排区内元素。
为什么子项被压扁？: 默认 flex-shrink:1 会收缩。固定尺寸用 flex: 0 0 <尺寸>，或给 min-width:0 允许正确收缩文本。

Flexbox 布局生成器