Flexbox布局生成器 - 在线弹性盒可视化生成

Flexbox布局生成器使用教程

本教程将详细介绍如何使用Flexbox布局生成器创建各种弹性盒布局。无论你是Flex新手还是经验丰富的开发者，都能快速上手。教程从界面介绍开始，逐步讲解属性设置、子项编辑和代码导出。

第一步：设置主轴方向

在「Flex容器属性」区域，首先设置flex-direction，决定子项的排列方向：

• row（默认）：主轴水平从左到右，子项横向排列，适合导航栏和按钮组
• row-reverse：主轴水平从右到左，子项反向排列
• column：主轴垂直从上到下，子项纵向排列，适合表单和侧边栏
• column-reverse：主轴垂直从下到上

改变主轴方向后，预览区域的箭头会同步更新，帮助理解主轴和交叉轴的含义。

第二步：设置主轴对齐

justify-content控制子项在主轴上的对齐与分布：

• flex-start：子项靠主轴起点对齐（默认值）
• flex-end：子项靠主轴终点对齐
• center：子项在主轴上居中对齐
• space-between：两端对齐，子项之间等间距，首尾紧贴容器边缘
• space-around：每个子项两侧间距相等，首尾间距是中间的一半
• space-evenly：所有间距完全相等，包括首尾

第三步：设置交叉轴对齐

align-items控制子项在交叉轴上的对齐方式：

• stretch（默认）：子项拉伸填充整个交叉轴高度
• flex-start：子项靠交叉轴起点对齐
• flex-end：子项靠交叉轴终点对齐
• center：子项在交叉轴上居中对齐
• baseline：子项按文字基线对齐

实现完美垂直居中的关键：justify-content: center（水平居中）+ align-items: center（垂直居中）。

第四步：设置换行和间距

当子项总宽度超过容器宽度时，flex-wrap决定是否换行：

• nowrap（默认）：不换行，子项可能被压缩
• wrap：换行，子项保持原始大小，排列到下一行
• wrap-reverse：反向换行

gap属性控制子项之间的间距，推荐8-16px。换行后可以使用align-content控制多行在交叉轴上的分布。

第五步：编辑子项属性

点击预览区域的色块选中一个子项，在「子项属性」区域编辑：

• flex-grow：控制子项如何分配剩余空间，0不增长，1等分，数值越大分配越多
• flex-shrink：控制空间不足时的收缩比例，0不收缩
• flex-basis：子项的初始尺寸，auto根据内容，也可设为具体值
• align-self：单独设置该子项的交叉轴对齐，覆盖align-items
• order：排列顺序，数值小的排前面，默认为0

第六步：复制CSS代码

编辑完成后，点击「复制代码」按钮，即可将Flexbox布局代码粘贴到项目CSS中。代码包含容器的display: flex、flex-direction、justify-content、align-items等属性，以及每个子项的flex-grow、flex-shrink等属性。