CSS 弹性盒子（Flexbox）综合实战与核心知识点测试

深入浅出 CSS 弹性盒子：从基础到实战的完整指南

大家好，今天咱们来聊聊前端布局的 "利器"------CSS 弹性盒子（Flexbox）。不管是做响应式页面，还是快速实现复杂布局，Flexbox 都是绕不开的核心知识点。这篇博客会抛弃表格，用纯文字 + 代码案例的形式，帮你把弹性盒子的知识点串成体系～

一、什么是弹性盒子？

弹性盒子（Flexible Box，简称 Flex）是 CSS3 引入的一维布局模型，专门用来解决 "元素在容器中对齐、分布、自适应" 的问题。

它的核心是 "容器（Flex Container）" 和 "项目（Flex Item）" 两个概念：

给父元素设置 display: flex，这个父元素就会变成弹性容器；
容器里的直接子元素，会自动成为弹性项目，参与弹性布局。

基础示例：

html 复制代码

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>
<style>
  .container {
    display: flex; /* 开启弹性布局 */
    width: 500px;
    height: 200px;
    border: 1px solid #ccc;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 0 5px;
  }
</style>

上面的代码中，.container 是弹性容器，里面的三个 .item 是弹性项目，会默认沿水平方向排列。

二、弹性容器的核心属性

给弹性容器设置的属性，会直接控制项目的排列方向、对齐方式和分布规则，是 Flex 布局的 "指挥中心"。

1. 排列方向：`flex-direction`

这个属性决定了弹性布局的主轴方向，因为 Flex 是一维布局，主轴要么水平，要么垂直。

row（默认值） ：主轴水平向右，项目从左到右依次排列。示例：
html 复制代码
```
.container {
  display: flex;
  flex-direction: row;
}
```
row-reverse：主轴水平向左，项目从右到左依次排列。
column ：主轴垂直向下，项目从上到下依次排列。示例：
html 复制代码
```
.container {
  display: flex;
  flex-direction: column;
}
```
column-reverse：主轴垂直向上，项目从下到上依次排列。

2. 换行规则：`flex-wrap`

当弹性项目的总宽度（或高度）超过容器时，这个属性控制项目是否换行。

nowrap（默认值）：不换行，项目会被自动压缩，强制挤在一行里。示例：如果容器宽度 500px，3 个项目各 200px，项目会被压缩，总宽度不超过 500px。
wrap ：自动换行，超出容器的项目会换到下一行（或下一列）排列。示例：
html 复制代码
```
.container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}
.item {
  width: 200px;
}
```
上面的代码里，一行只能放 2 个项目，第 3 个项目会自动换行。
wrap-reverse ：自动换行，但新行的排列方向和 wrap 相反，比如水平布局时，新行在上方。

3. 简写属性：`flex-flow`

这是 flex-direction 和 flex-wrap 的组合简写，两个属性值用空格分隔，顺序不分先后。示例：设置 "水平排列 + 自动换行"

复制代码

.container {
  display: flex;
  flex-flow: row wrap;
}

4. 主轴对齐：`justify-content`

这个属性控制项目在主轴方向的对齐方式，是日常开发中最常用的属性之一。

flex-start（默认值）：项目靠主轴的起始位置对齐。比如水平布局时，项目靠左对齐。
flex-end：项目靠主轴的结束位置对齐。比如水平布局时，项目靠右对齐。
center ：项目在主轴方向居中对齐。这是实现水平居中的常用方式。示例：水平居中弹性项目
复制代码
```
.container {
  display: flex;
  justify-content: center;
  width: 500px;
}
```
space-between：项目两端对齐，首尾项目紧贴容器边缘，中间项目之间的间距相等。适用场景：导航栏的 "logo 居左，菜单居右" 布局。
space-around：每个项目两侧的间距相等，首尾项目和容器边缘的间距，是中间项目间距的一半。
space-evenly：项目之间的间距，以及首尾项目和容器边缘的间距，完全相等。

5. 交叉轴对齐（单行）：`align-items`

交叉轴是和主轴垂直的轴，比如主轴水平时，交叉轴就是垂直方向。这个属性在容器只有一行项目时生效，控制项目在交叉轴的对齐方式。

stretch（默认值） ：如果项目没有设置高度，会自动拉伸，填满容器的交叉轴高度。示例：项目高度自适应容器
复制代码
```
.container {
  display: flex;
  height: 200px; /* 容器有高度 */
  align-items: stretch;
}
.item {
  width: 100px; /* 项目没设高度 */
}
```
此时项目的高度会自动变成 200px，和容器一样高。
flex-start：项目靠交叉轴的起始位置对齐。比如主轴水平时，项目靠上对齐。
flex-end：项目靠交叉轴的结束位置对齐。比如主轴水平时，项目靠下对齐。

center ：项目在交叉轴方向居中对齐。结合 justify-content: center 可以实现项目的水平 + 垂直居中。示例：项目水平垂直居中

复制代码

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}
.item {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

baseline：项目按照文字的基线对齐，适合需要对齐文字的场景。

6. 交叉轴对齐（多行）：`align-content`

当容器设置了 flex-wrap: wrap 导致项目换行后，这个属性才会生效，控制多行项目整体在交叉轴的对齐方式。如果只有一行项目，这个属性无效。

stretch（默认值）：多行项目自动拉伸，填满容器的交叉轴高度。
flex-start：多行项目靠交叉轴的起始位置对齐。
flex-end：多行项目靠交叉轴的结束位置对齐。
center：多行项目在交叉轴方向居中对齐。
space-between：多行两端对齐，首尾行紧贴容器边缘，行与行之间的间距相等。
space-around：每行两侧的间距相等，首尾行和容器边缘的间距是行间距的一半。

三、弹性项目的核心属性

给弹性项目单独设置的属性，会控制单个项目的尺寸、排列顺序和对齐方式，优先级高于容器的属性。

1. 尺寸分配：`flex`（核心重点）

这是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，是控制项目伸缩规则的关键，日常开发中直接用这个简写属性即可。

先拆解三个子属性的含义：

flex-grow：项目的放大比例，默认值是 0。如果容器有剩余空间，值为 0 的项目不会放大；值越大，项目分到的剩余空间越多。
flex-shrink：项目的缩小比例，默认值是 1。如果容器空间不足，值为 1 的项目会自动缩小；值为 0 的项目不会缩小。
flex-basis：项目的基准尺寸 ，默认值是 auto，表示项目的初始大小由自身宽度 / 高度决定；也可以设置具体数值，比如 200px。

常用简写场景：

场景 1：项目等分容器空间 给所有项目设置 flex: 1，它们会自动平分容器的剩余空间，实现自适应等分布局。示例：

html 复制代码

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
</div>
<style>
  .container {
    display: flex;
    width: 500px;
  }
  .item {
    flex: 1; /* 两个项目各占 50% 宽度 */
    height: 100px;
    background-color: lightgreen;
  }
</style>

场景 2：项目固定尺寸，不伸缩 设置 flex: 0 0 200px，表示项目不放大、不缩小，基准尺寸是 200px。示例：
复制代码
```
.item {
  flex: 0 0 200px;
}
```

2. 排列顺序：`order`

这个属性控制项目的排列顺序，默认值是 0。数值越小，项目的排列位置越靠前；支持设置负数。示例：调整项目顺序

复制代码

<div class="container">
  <div class="item" style="order: 2;">项目1</div>
  <div class="item" style="order: 1;">项目2</div>
</div>
<style>
  .container { display: flex; }
</style>

上面的代码中，项目 2 的 order 值更小，会排在项目 1 的前面。

3. 单独对齐：`align-self`

这个属性可以覆盖容器的 align-items 属性，单独控制某一个项目在交叉轴的对齐方式。示例：让某个项目单独垂直居中

复制代码

.container {
  display: flex;
  align-items: flex-start; /* 容器里的项目默认靠上对齐 */
  height: 200px;
}
.item-special {
  align-self: center; /* 这个项目单独垂直居中 */
}

四、弹性盒子容器属性

displaydisplay 属性是启用 Flex 布局的关键：

display: flex; /* 行方向 /
display: inline-flex; / 行方向，元素显示为内联块级元素 */
flex-direction控制主轴的方向。可以设置以下几种值：

row：默认值，主轴是水平方向，子元素从左到右排列。
row-reverse：主轴是水平方向，子元素从右到左排列。
column：主轴是垂直方向，子元素从上到下排列。
column-reverse：主轴是垂直方向，子元素从下到上排列。

flex-direction: row; /* 默认 /
flex-direction: column; / 主轴垂直排列 */

flex-wrap控制当子元素溢出容器时，是否换行：

nowrap（默认）：不换行，所有子元素都排列在一行。
wrap：允许子元素换行，第二行从上一行的末尾开始。
wrap-reverse：换行，但新的行从上方开始。

示例：

复制代码

flex-wrap: wrap;

flex-flowflex-direction 和 flex-wrap 的简写形式。

示例：

复制代码

flex-flow: row wrap; /* 主轴水平排列，子元素换行 */

justify-content用于在主轴方向上对齐 Flex 项，可以选择的值有：

flex-start：默认值，子元素从起始位置对齐。
flex-end：子元素从末尾对齐。
center：子元素居中对齐。
space-between：子元素之间的间隔相等，起始和结束没有间隔。
space-around：子元素之间的间隔相等，但起始和结束也有间隔。
space-evenly：子元素之间的间隔相等，且包括起始和结束的间隔。

示例：

复制代码

justify-content: center;

align-items用于在交叉轴方向上对齐 Flex 项，可以选择的值有：

flex-start：子元素在交叉轴的起始位置对齐。
flex-end：子元素在交叉轴的末尾对齐。
center：子元素在交叉轴的中心对齐。
baseline：子元素的基线对齐。
stretch：默认值，子元素拉伸以填满容器。

示例：

复制代码

align-items: center;

align-content用于控制多行内容的对齐方式（当 flex-wrap 为 wrap 时生效）。与 align-items 类似，但控制的是多行之间的对齐：

flex-start：对齐到容器的起始位置。
flex-end：对齐到容器的末尾。
center：对齐到容器的中心。
space-between：多行之间的间隔相等，起始和结束没有间隔。
space-around：多行之间的间隔相等，起始和结束也有间隔。
stretch：默认值，拉伸以填满容器。

示例：

复制代码

align-content: center;

五、弹性盒子项目属性

order 用于设置 Flex 项的显示顺序。默认情况下，所有 Flex 项的order值为 0，值越小，越先显示。

示例：

复制代码

order: 2;

flex-grow 定义 Flex 项的放大比例，默认值是 0，表示不放大。如果所有 Flex 项的flex-grow为 1，它们将平分剩余空间。

示例：

复制代码

flex-grow: 1; /* 占据剩余空间 */

flex-shrink定义 Flex 项的缩小比例，默认值是 1，表示当空间不足时，Flex 项将缩小。值为 0 时，Flex 项不会缩小。

示例：

复制代码

flex-shrink: 1; /* 可缩小 */

flex-basis 定义 Flex 项的初始大小，可以是一个长度值（例如 100px）或者auto。

示例：

复制代码

flex-basis: 200px;

flex flex是flex-grow、flex-shrink和flex-basis的简写形式。默认值：flex: 0 1 auto;

示例：

复制代码

flex: 1 1 100px; /* 所有项平分空间，初始尺寸100px */

align-self 用于覆盖align-items对单个 Flex 项的对齐。可选值有：

auto ：默认值，继承align-items。
flex-start：起始对齐。
flex-end：末尾对齐。
center：居中对齐。
baseline：基线对齐。
stretch：拉伸对齐。

示例：

css

复制代码

align-self: center;

六、弹性盒子的实战高频场景

Flexbox 几乎能搞定所有一维布局需求，以下是几个日常开发中最常用的场景。

1. 水平垂直居中布局

这是最经典的场景，用 Flex 实现比传统方法简单得多。

复制代码

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  width: 400px;
  height: 400px;
  border: 1px solid #000;
}
.center-item {
  width: 150px;
  height: 150px;
  background-color: coral;
}

2. 两端对齐的导航栏

实现 "左侧 logo，右侧菜单" 的布局，用 justify-content: space-between 即可。

html 复制代码

<nav class="nav-container">
  <div class="logo">我的网站</div>
  <ul class="menu">
    <li>首页</li>
    <li>关于我们</li>
  </ul>
</nav>
<style>
  .nav-container {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    align-items: center;
    background-color: #333;
    color: #fff;
  }
  .menu {
    display: flex;
    list-style: none;
  }
  .menu li {
    margin-left: 20px;
  }
</style>

3. 响应式换行布局

实现 "大屏一行多列，小屏自动换行" 的响应式效果，结合 flex-wrap: wrap 和媒体查询。

html 复制代码

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* 项目之间的间距，替代 margin */
  padding: 20px;
}
.item {
  flex: 0 0 calc(33.33% - 15px); /* 一行3个项目 */
  height: 150px;
  background-color: lavender;
}
/* 屏幕宽度小于 768px 时，一行2个项目 */
@media (max-width: 768px) {
  .item {
    flex: 0 0 calc(50% - 15px);
  }
}
/* 屏幕宽度小于 480px 时，一行1个项目 */
@media (max-width: 480px) {
  .item {
    flex: 0 0 100%;
  }
}

Flexbox 的优势总结

相比传统的 float、position 布局，Flexbox 有几个 "碾压级" 的优点：

简单高效：用少量属性就能实现复杂的对齐和分布效果，不用写繁琐的清除浮动代码。
自适应强：轻松实现响应式布局，适配不同尺寸的屏幕。
灵活可控：可以单独调整某个项目的位置和尺寸，布局精细化程度高。

到这里，弹性盒子的核心知识点就全部讲完啦～建议大家多写 demo 练手，比如用 Flex 做一个卡片布局或者表单布局，很快就能熟练掌握。

CSS 弹性盒子（Flexbox）综合实战与核心知识点测试

深入浅出 CSS 弹性盒子：从基础到实战的完整指南

一、什么是弹性盒子？

二、弹性容器的核心属性

1. 排列方向：flex-direction

2. 换行规则：flex-wrap

3. 简写属性：flex-flow

4. 主轴对齐：justify-content

5. 交叉轴对齐（单行）：align-items

6. 交叉轴对齐（多行）：align-content

三、弹性项目的核心属性

1. 尺寸分配：flex（核心重点）

2. 排列顺序：order

3. 单独对齐：align-self

四、弹性盒子容器属性

五、弹性盒子项目属性

六、弹性盒子的实战高频场景

1. 水平垂直居中布局

2. 两端对齐的导航栏

3. 响应式换行布局

Flexbox 的优势总结

1. 排列方向：`flex-direction`

2. 换行规则：`flex-wrap`

3. 简写属性：`flex-flow`

4. 主轴对齐：`justify-content`

5. 交叉轴对齐（单行）：`align-items`

6. 交叉轴对齐（多行）：`align-content`

1. 尺寸分配：`flex`（核心重点）

2. 排列顺序：`order`

3. 单独对齐：`align-self`