CSS Flexbox 布局生成器：可视化配置弹性布局，一键导出 CSS

Flexbox 是处理一维布局的首选 CSS 工具，导航栏、按钮组、内容居中、卡片行——这些都是 Flexbox 的主场。但记住哪些属性写在容器上、哪些写在子项上，以及各个值的具体效果，需要一定的积累。CSS Flexbox 生成器让你用可视化界面配置属性，直接复制生成的 CSS。

立即使用 CSS Flexbox 生成器 →

Flexbox 的工作原理

给容器添加 display: flex，它就变成了一个弹性容器，子元素自动成为弹性项目，沿主轴（默认水平）排列。

.container {
  display: flex;
}

只这一行就够用了，子元素会立刻排成一行。其余都是对这个布局的精细调整。

容器属性

以下属性写在弹性容器（父元素）上。

`flex-direction`

设置主轴方向：

flex-direction: row;            /* 默认：从左到右 */
flex-direction: row-reverse;    /* 从右到左 */
flex-direction: column;         /* 从上到下 */
flex-direction: column-reverse; /* 从下到上 */

设为 column 后，主轴变为纵向，justify-content 和 align-items 的效果方向也随之对调。

`justify-content`

控制子项在主轴上的分布方式：

值	效果
`flex-start`	靠主轴起点堆放（默认）
`flex-end`	靠主轴终点堆放
`center`	居中排列
`space-between`	两端对齐，中间等间距
`space-around`	每个子项两侧等间距（边缘间距是中间的一半）
`space-evenly`	所有间距（含边缘）完全相等

`align-items`

控制子项在交叉轴（垂直于主轴）上的对齐方式：

值	效果
`stretch`	拉伸填满容器高度（默认）
`flex-start`	交叉轴起点对齐
`flex-end`	交叉轴终点对齐
`center`	交叉轴居中
`baseline`	按文字基线对齐

`flex-wrap`

控制子项是否换行：

flex-wrap: nowrap;        /* 默认：不换行，可能溢出 */
flex-wrap: wrap;          /* 空间不足时换行 */
flex-wrap: wrap-reverse;  /* 换行方向反转 */

多个子项的响应式布局通常用 flex-wrap: wrap 配合子项的 flex-basis 或 min-width。

`gap`

设置子项之间的间距，不影响容器边缘：

gap: 1rem;           /* 行列间距相同 */
gap: 1rem 2rem;      /* 行间距 列间距 */

gap 只作用于子项之间，不是子项与容器之间。容器边缘的内边距用 padding 设置。

`align-content`

当子项换行形成多行时，控制行与行之间的分布（类似 justify-content 对子项的作用）：

align-content: flex-start;
align-content: center;
align-content: space-between;
align-content: stretch; /* 默认 */

只有一行时 align-content 无效。

子项属性

以下属性写在弹性子项（子元素）上。

`flex-grow`

控制子项在有剩余空间时按比例增长：

.item-a { flex-grow: 1; }  /* 占 1 份剩余空间 */
.item-b { flex-grow: 2; }  /* 占 2 份，是 item-a 的两倍 */
.item-c { flex-grow: 0; }  /* 不增长（默认） */

`flex-shrink`

控制空间不足时子项按比例缩小：

flex-shrink: 1;  /* 默认：按比例缩小 */
flex-shrink: 0;  /* 不缩小 */

对图标、头像等固定宽度元素设置 flex-shrink: 0，防止被压缩变形。

`flex-basis`

设置子项在 grow/shrink 计算前的初始尺寸：

flex-basis: auto;    /* 依据 width/height 决定 */
flex-basis: 0;       /* 从零开始增长 */
flex-basis: 200px;   /* 从 200px 开始 */
flex-basis: 25%;     /* 容器宽度的 25% */

`flex` 简写

flex 合并了 flex-grow、flex-shrink、flex-basis 三个属性：

flex: 1;            /* flex: 1 1 0 — 会增长、会缩小、从零开始 */
flex: auto;         /* flex: 1 1 auto */
flex: none;         /* flex: 0 0 auto — 固定尺寸，不增不减 */
flex: 0 1 200px;    /* 不增长、可缩小、初始 200px */

最常用的是 flex: 1（等比分配）和 flex: none（固定尺寸）。

`align-self`

覆盖容器 align-items 对单个子项的设置：

.item-special {
  align-self: flex-end; /* 仅此项靠底对齐，其他子项不受影响 */
}

`order`

改变视觉顺序，不改变 DOM 顺序：

.item-first { order: -1; } /* 排在 order: 0 的元素之前 */
.item-last  { order: 1;  } /* 排在 order: 0 的元素之后 */

所有子项默认 order: 0。

常用布局模式

水平垂直居中

Flexbox 最高频的用法：

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

导航栏

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
}

.navbar .logo {
  flex: none;         /* Logo 不增不减 */
  margin-right: auto; /* 把后续元素推到右侧 */
}

粘性底部

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main  { flex: 1; }    /* 主内容填满剩余空间 */
footer { flex: none; } /* 页脚保持自然高度 */

等宽多列

.columns {
  display: flex;
  gap: 1rem;
}

.column {
  flex: 1; /* 所有列等宽 */
}

可换行卡片行

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 280px;  /* 会增长、会缩小、初始 280px */
  min-width: 0;     /* 允许内部文字截断 */
}

媒体对象（图标 + 文字）

评论区、通知列表的经典模式：

.media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.media-icon {
  flex: none;   /* 图标固定尺寸 */
  width: 40px;
}

.media-body {
  flex: 1;      /* 文字区占满剩余空间 */
  min-width: 0; /* 防止长文本溢出 */
}

Flexbox vs Grid 怎么选

两者互补，不是替代关系：

场景	Flexbox	Grid
导航栏	✓	—
单元素居中	✓	—
等宽卡片网格	—	✓
页面整体布局	—	✓
一行元素对齐	✓	—
复杂叠加布局	—	✓
换行列表	✓	✓

实际项目中两者共用：Grid 管页面结构，Flexbox 管组件内部排列。

浏览器调试

Chrome、Firefox 和 Edge 的 DevTools 都内置了 Flexbox 检查器。在 Elements 面板中点击 flex 容器旁的 flex 标记，页面上会叠加显示主轴方向、自由空间分布和各子项的增减状态。

用 CSS Flexbox 生成器提升效率

justify-content、align-items、flex-wrap 和 gap 有很多组合，手动调试需要频繁刷新。CSS Flexbox 生成器提供实时可视化操作：

点选所有容器和子项属性
即时预览布局效果变化
一键复制容器和子项的完整 CSS
调整子项数量、flex-grow/shrink 值和 flex-basis

立即体验 CSS Flexbox 生成器 →

Flexbox 的工作原理

容器属性

flex-direction

justify-content

align-items

flex-wrap

gap

align-content