这个工具是什么
CSS Flexbox Generator 为容器生成现代标准 Flexbox 声明。预览包含多个编号元素，属性变化会立即应用到容器，方便比较不同对齐方式。
如何使用
- 设置 flex-direction，确定主轴方向。
- 选择 justify-content 与 align-items。
- 设置 flex-wrap 和 gap 间距。
- 观察预览 Item 的位置，再复制 .container CSS。
使用示例
- row + center 可让 Item 在水平方向居中。
- column 会把主轴切换为垂直方向。
- wrap 允许空间不足时换行，nowrap 保持在一行。
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}原理与 CSS 说明
justify-content 控制主轴分布，align-items 控制交叉轴对齐。row 的主轴通常沿水平方向，column 切换到垂直方向。flex-wrap 决定空间不足时是否换行，gap 在相邻 Item 或行之间提供间距。
常见用途
- 搭建导航、按钮组和卡片排列。
- 理解主轴与交叉轴。
- 比较 space-between、space-around 和 space-evenly。
隐私说明
所有输入、计算、CSS 生成和预览都在当前浏览器中完成，不会上传用户内容，不使用后台、数据库、在线 API 或第三方 CDN，也不会自动保存您的输入。
FAQ
justify-content 和 align-items 有什么区别？
前者控制主轴上的分布，后者控制交叉轴上的对齐，不能简单理解为永远水平或垂直。
flex-direction 改变后主轴会怎样？
row 使用行方向，column 使用列方向；reverse 变体会反转相应主轴的排列方向。
什么时候使用 flex-wrap？
当 Item 不希望被压缩到同一行，且容器允许分成多行时，可使用 wrap。
gap 可以用于 Flexbox 吗？
可以。它设置 Item 与行之间的间距，输出使用标准 gap 属性。