CSS Flexbox 教程：布局可视化

居中、等分、自适应——CSS 三大难题，Flexbox 一次性解决。本文详解 Flexbox 全部属性，并介绍可视化生成器。

什么是 Flexbox？

Flexbox（Flexible Box Layout）是 CSS3 引入的一维布局模型，专门处理元素在一行或一列中的排列。

核心概念

flex container（容器）
  ├ flex item（子项）
  ├ flex item
  └ flex item

主轴 vs 交叉轴

• main axis（主轴）：flex-direction 方向
• cross axis（交叉轴）：垂直主轴的方向

Flexbox 属性

容器属性

#### 1. display

.container {
  display: flex;        /* 块级 flex */
  display: inline-flex; /* 行内 flex */
}

#### 2. flex-direction

主轴方向：

flex-direction: row;            /* 横向，从左到右 */
flex-direction: row-reverse;    /* 横向，从右到左 */
flex-direction: column;         /* 纵向，从上到下 */
flex-direction: column-reverse; /* 纵向，从下到上 */

#### 3. justify-content

主轴对齐：

justify-content: flex-start;     /* 起始对齐 */
justify-content: flex-end;       /* 结尾对齐 */
justify-content: center;         /* 居中 */
justify-content: space-between;  /* 两端对齐，间隔均匀 */
justify-content: space-around;   /* 每项两侧间隔相等 */
justify-content: space-evenly;   /* 间隔完全相等 */

#### 4. align-items

交叉轴对齐：

align-items: stretch;     /* 拉伸填满 */
align-items: flex-start;  /* 起始对齐 */
align-items: flex-end;    /* 结尾对齐 */
align-items: center;      /* 居中 */
align-items: baseline;   /* 基线对齐 */

#### 5. flex-wrap

换行：

flex-wrap: nowrap;       /* 不换行，缩小适应 */
flex-wrap: wrap;         /* 换行 */
flex-wrap: wrap-reverse; /* 反向换行 */

#### 6. align-content

多行对齐（需 flex-wrap: wrap）：

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;

#### 7. gap

间隔：

gap: 10px;        /* 行列间隔 */
gap: 10px 20px;   /* 行间隔 10px，列间隔 20px */
row-gap: 10px;
column-gap: 20px;

子项属性

#### 1. flex-grow

放大比例：

flex-grow: 0;  /* 不放大 */
flex-grow: 1;  /* 放大填满剩余空间 */
flex-grow: 2;  /* 比其他大 2 倍 */

#### 2. flex-shrink

缩小比例：

flex-shrink: 0;  /* 不缩小 */
flex-shrink: 1;  /* 默认缩小 */

#### 3. flex-basis

基础尺寸：

flex-basis: auto;     /* 默认，根据内容 */
flex-basis: 200px;   /* 固定 200px */
flex-basis: 50%;     /* 50% 宽度 */

#### 4. flex 简写

flex: 0 1 auto;       /* 默认 */
flex: 1;               /* = flex: 1 1 0% */
flex: auto;            /* = flex: 1 1 auto */
flex: none;            /* = flex: 0 0 auto */
flex: 0 0 200px;       /* 固定 200px */

#### 5. align-self

单个对齐：

align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;

#### 6. order

排序：

order: 0;   /* 默认 */
order: -1;  /* 提前 */
order: 1;   /* 靠后 */

常见布局

1. 居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 两栏布局（侧边栏 + 主内容）

.container {
  display: flex;
}
.sidebar {
  flex: 0 0 200px;
}
.main {
  flex: 1;
}

3. 三栏布局（左中右）

.container {
  display: flex;
}
.left, .right {
  flex: 0 0 200px;
}
.main {
  flex: 1;
}

4. 等分卡片

.container {
  display: flex;
  gap: 10px;
}
.card {
  flex: 1;
}

5. 圣杯布局

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.header, .footer {
  flex: 0 0 auto;
}
.body {
  flex: 1;
  display: flex;
}
.nav {
  flex: 0 0 200px;
}
.content {
  flex: 1;
}

6. 顶部导航栏

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.nav-left, .nav-right {
  display: flex;
  gap: 15px;
}

7. 卡片网格

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.card {
  flex: 0 0 calc(33.333% - 10px);
}

8. 媒体对象（头像 + 内容）

.media {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.media img {
  flex: 0 0 50px;
}
.media-body {
  flex: 1;
}

52tool CSS Flexbox 生成器

工具地址：CSS 渐变（含 Flex 可视化）

功能

• 可视化调整 Flex 属性
• 实时预览效果
• 一键复制 CSS
• 常见布局模板
• 浏览器端运行

实战：生成居中布局

设置：
display: flex
justify-content: center
align-items: center

输出 CSS：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

编程实战

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: #f0f0f0;
}

.item {
  width: 80px;
  height: 80px;
  background: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

Flexbox vs Grid

Flexbox

• 一维布局
• 适合：导航栏、卡片行、媒体对象
• 子项大小自适应

Grid

• 二维布局
• 适合：复杂网格、整体页面布局
• 显式定义行列

选择

• 简单线性布局 → Flexbox
• 复杂二维布局 → Grid
• 两者经常组合使用

浏览器兼容

现代浏览器完全支持。需要兼容 IE 11 加前缀：

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

常见问题

Q: flex: 1 是什么意思？

A: flex: 1 = flex: 1 1 0%。grow=1（放大填满）、shrink=1（默认缩小）、basis=0%（无基础宽度）。常用于自适应填充剩余空间。

Q: flex: 1 和 flex: auto 区别？

A: flex: 1 basis 是 0%，所有子项均分。flex: auto basis 是 auto，根据内容大小分配。

Q: 为什么 flex 子项不会自动换行？

A: 默认 flex-wrap: nowrap。要换行加 flex-wrap: wrap。

Q: flex-grow 和 flex-basis 怎么配合？

A: flex-basis 是初始大小，flex-grow 决定剩余空间如何分配。如两个子项 basis 100px，剩余 200px，flex-grow 1:2，则分别加 67px 和 133px。

Q: 怎么让 flex 子项垂直居中？

A: 容器加 align-items: center。

Q: 怎么让最后一项靠右？

A: 在最后一项前加 margin-left: auto。

常见问题解答

Q: 怎么用 Flexbox 居中？

A: 父元素 display: flex; justify-content: center; align-items: center;。

Q: Flexbox 和 Grid 哪个好？

A: 看场景。一维（导航、卡片行）用 Flexbox，二维（整体页面）用 Grid。两者常组合使用。

Q: flex: 1 和 flex-grow: 1 一样吗？

A: 不完全。flex: 1 = flex: 1 1 0%（含 grow、shrink、basis）。flex-grow: 1 只设 grow，其他默认。

Q: flex-wrap 不生效？

A: 检查容器是否设了固定宽度。子项总宽超过容器才会换行。

Q: 怎么用可视化工具？

A: 用 52tool CSS 工具，调属性即时预览，复制代码即可。

Q: 浏览器兼容性？

A: 现代浏览器完全支持。IE 11 部分支持（需加前缀），IE 10 以下不支持。

总结

Flexbox 是 CSS 布局神器：

• 可视化生成 → 52tool CSS 工具
• 居中神器 → justify-content: center; align-items: center
• 等分布局 → flex: 1
• 自适应 → flex-grow + flex-basis

记住：flex: 1 让子项均分，align-items 控制交叉轴，flex-wrap 让子项换行。