Flex 布局（四）

本页对应 Flex 布局，共 6 段视频，约 53 分钟。

学习目标

1. 能使用 Flex 布局为主轴和侧轴设置居中，实现子盒子在父盒子内水平、垂直居中，并能说明所用属性及作用对象。
2. 能区分并演示 align-items 的 stretch、center、flex-start、flex-end 效果，指出默认值及拉伸行为。
3. 能按综合案例结构搭建大盒子、头部和主体区域，正确选择直接父元素添加 display: flex，并使用 justify-content: space-between 实现左右分布。
4. 能完成综合案例头部文字修饰，包括标题、说明文字和链接的字号、颜色、加粗及上下内边距设置。
5. 能使用 li 制作商品卡片，完成图片、标题、价格的结构与样式，并通过父级 ul 的 Flex 设置使多个 li 横向排列且间距分布正确。
6. 能使用 flex-wrap 让超出容器宽度的 Flex 子项自动换行，并能在作业中把指定旧案例改造成无缝隙的 Flex 布局。

知识点

Flex布局的定位与组成

为什么需要：浮动布局容易出现脱标，结构一复杂就难对齐；Flex 是浏览器提倡的弹性布局，适合结构化布局，空间分布和对齐能力更强。怎么想：先把“谁排列孩子”想清楚——给父元素设置 display: flex，子元素才会自动挤压或拉伸。怎么做：认识弹性容器、弹性盒子、主轴（默认水平）、侧轴/交叉轴（默认垂直）。易错点：display: flex 写给父元素，不是写给子元素；Flex 不会产生浮动脱标现象。

主轴对齐方式

为什么需要：一行里有多个子项时，要控制它们在主轴上的起点、终点、居中或缝隙分布。怎么想：先判断“两端有没有缝隙、缝隙是否一样大”。怎么做：用 justify-content。重点记住：space-between 最常用，两侧没缝隙；space-around 记住 2 倍缝隙；space-evenly 空隙一样大；center 常用于让一个盒子水平居中。

justify-content: space-between;

显示效果：两侧没缝隙

justify-content: space-around;

效果如下：记住2倍

justify-content: space-evenly;

效果如下：记住空隙一样大

 justify-content: center;

效果如下：经常用于让一个盒子水平居中

记忆：两侧没缝隙是 between；缝隙一样大是 evenly；2 倍缝隙是 around。易错点：space-* 只作用于主轴；between 不是“中间有缝”，而是两端贴边、中间分缝。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* 给父亲添加 flex */
      display: flex;
      /* 主轴的排列方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* 让子盒子居中对齐 */
      /* justify-content: center; */
      /* between  */
      /* justify-content: space-between; */
      /* justify-content: space-around; */
      justify-content: space-evenly;
      width: 900px;
      height: 200px;
      background-color: pink;
    }

    .box div {
      width: 249px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

侧轴对齐方式

为什么需要：主轴解决“横着怎么排”，侧轴解决“竖着怎么对齐”。怎么想：当前容器内所有弹性盒子统一对齐，用 align-items（给弹性容器）；只控制某个弹性盒子，用 align-self（给弹性盒子）。怎么做：常用 flex-start、flex-end、center、stretch。易错点：stretch 是默认值，子项没设高度时会拉伸得和父亲一样高；flex-start/flex-end 是“开始/结束”，轴方向改变时含义也会变。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* 给父亲添加 flex */
      display: flex;
      /* 主轴的排列方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* 让子盒子居中对齐 */
      /* justify-content: center; */
      /* between  */
      /* 两侧没缝隙 */
      /* justify-content: space-between; */
      /* 两倍缝隙 */
      /* justify-content: space-around; */
      justify-content: space-evenly;

      /* 侧轴的对齐方式 */
      /* 顶部对齐 */
      /* align-items: flex-start; */
      /* 底部对齐 */
      /* align-items: flex-end; */
      /* 居中对齐 */
      /* align-items: center; */
      /* 默认的 拉伸和父亲一样 */
      align-items: stretch;
      width: 900px;
      height: 500px;
      background-color: pink;
    }

    .box div {
      width: 249px;
      /* height: 200px; */
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

盒子水平和垂直居中的写法

为什么需要：一个子盒子在父盒子中水平、垂直居中，是常见布局和经典面试题。怎么想：主轴水平居中一个 center，侧轴垂直居中一个 center。怎么做：父盒子 display:flex; justify-content:center; align-items:center;。易错点：两条居中都写给父元素；不要忘记 display:flex；这里只讲 Flex 这一种写法。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      /* 利用flex实现 */
      display: flex;
      /* 主轴水平居中 */
      justify-content: center;
      /* 侧轴水平居中 */
      align-items: center;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

从案例看Flex调试：亲爸爸与拆分布局

为什么需要：真实页面不是单个盒子，必须知道 Flex 加给谁。怎么想：先分上下，再分左右；谁的孩子要在一行，就给“谁的亲爸爸”加 display:flex。怎么做：课堂案例先做大盒子，宽约 1240、高约 541，标准流水平居中；里面分 box-hd、box-bd 上下两块，这两块仍用标准流，不盲目加 Flex。box-hd 里放 h2 和 a，给 box-hd 加 display:flex; justify-content:space-between; align-items:flex-end;，并用上下 padding:40px 0 拉距离。底部 ul 里放四个 li，给 li 的亲爸爸 ul 加 display:flex; justify-content:space-between;，四个 li 才能一行且两侧无缝隙；li 内图片设 width:100%，标题和价格再细修。易错点：必须找“亲爸爸”，不能给 box-bd 加 Flex 去控制 li；弹性盒子默认不换行，超过一行要预习 flex-wrap:wrap；不要所有盒子都加 Flex，本来上下排列的标准流不需要。

本节图示

综合案例：先搭大盒子，再拆头部与主体

为什么需要：一个商品模块通常不是“一个盒子写到底”，而是先有外层版心，再分头部和主体。这样结构清楚，后面复制模块、改内容都方便。
怎么想：先量出大盒子宽高，再按“上头部、下主体”拆分。大盒子本身只是一个标准流盒子，用 margin: 100px auto 水平居中即可；不要因为后面要用 flex，就急着给大盒子加 display:flex。
怎么做：写出 .box > .box-hd + .box-bd，并做基础初始化。
易错点：大盒子是单个盒子居中，不需要 flex；box-sizing: border-box、li { list-style:none } 这类初始化不要漏。

<div class="box">
  <div class="box-hd">头部</div>
  <div class="box-bd">主题</div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.box {
  width: 1240px;
  height: 540px;
  background-color: pink;
  margin: 100px auto;
}

头部标题：h2 与 a 一行，并底对齐

为什么需要：头部左边是标题，右边是“查看更多”，默认 h2 是块级元素会独占一行，a 会被挤到下一行。
怎么想：让 h2 和 a 一行显示，就要给它们的亲爸爸 .box-hd 加 flex。转写稿里反复强调“父控子、亲爸爸”，这里 .box-hd 才是 h2 和 a 的父亲。
怎么做：.box-hd 加 display:flex；一左一右用 justify-content:space-between；文字底部对齐用 align-items:flex-end；上下留白用 padding:40px 0。调试时会发现默认是上对齐，所以要补侧轴底对齐。
易错点：align-items 写在父亲身上，不是写在 h2 上；space-between 是主轴两端对齐，不是给每个孩子加 margin。

<div class="box">
  <div class="box-hd">
    <h2>新鲜好物
      <span>新鲜出炉 品质靠谱</span>
    </h2>
    <a href="#">查看更多> </a>
  </div>
  <div class="box-bd">主题</div>
</div>

.box-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 40px 0;
}

修饰文字：标题、说明、链接分别控制

为什么需要：结构搭好后，文字大小、颜色、粗细不一致，需要单独选中修饰。
怎么想：h2 控制主标题，h2 span 控制副标题，a 控制链接。
怎么做：主标题 32px、不加粗；副标题和链接 16px、灰色 #999。
易错点：span 必须写在 h2 里面；选择器不要写错层级。

.box-hd h2 {
  font-size: 32px;
  font-weight: 400;
}

.box-hd h2 span {
  font-size: 16px;
  color: #999;
}

.box-hd a {
  font-size: 16px;
  color: #999;
}

底部小 li：图片、标题、价格

为什么需要：商品卡片需要统一结构，方便复制多个。
怎么想：一个 li 里放 img、h4、p；先写一个，调好后再复制。
怎么做：li 宽 306、高 406，文字居中；图片 width:100% 与卡片同宽；标题和价格调字号、间距、颜色。skyblue 是调试背景，最后可去掉。
易错点：图片不设 width:100% 会撑出卡片；文字居中要加给 li。

<ul>
  <li>
    <img src="./images/1.jpg" alt="">
    <h4>全防水HABU旋钮</h4>
    <p>¥444.00</p>
  </li>
</ul>

.box-bd li {
  width: 306px;
  height: 406px;
  background-color: skyblue;
  text-align: center;
}

.box-bd li img {
  width: 100%;
}

.box-bd li h4 {
  font-size: 22px;
  font-weight: 400;
  margin: 12px 0 20px;
}

.box-bd li p {
  font-size: 18px;
  color: orangered;
}

多个 li 一行：flex 必须加给 ul

为什么需要：li 默认标准流竖着排，需要横排。
怎么想：li 的亲爸爸是 ul，不是 .box-bd。转写稿里调试过：把 display:flex 加给 .box-bd 不生效，因为隔代了。
怎么做：给 ul 加 display:flex 和 justify-content:space-between。
易错点：flex 一定父控子；想让 li 一行，就找 ul。

.box-bd ul {
  display: flex;
  justify-content: space-between;
}

完整效果与完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    li { list-style: none; }
    .box {
      width: 1240px;
      height: 540px;
      margin: 100px auto;
    }
    .box-hd {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 40px 0;
    }
    .box-hd h2 { font-size: 32px; font-weight: 400; }
    .box-hd h2 span { font-size: 16px; color: #999; }
    .box-hd a { font-size: 16px; color: #999; }
    .box-bd ul {
      display: flex;
      justify-content: space-between;
    }
    .box-bd li {
      width: 306px;
      height: 406px;
      background-color: skyblue;
      text-align: center;
    }
    .box-bd li img { width: 100%; }
    .box-bd li h4 {
      font-size: 22px;
      font-weight: 400;
      margin: 12px 0 20px;
    }
    .box-bd li p { font-size: 18px; color: orangered; }
  </style>
</head>
<body>
  <div class="box">
    <div class="box-hd">
      <h2>新鲜好物
        <span>新鲜出炉 品质靠谱</span>
      </h2>
      <a href="#">查看更多> </a>
    </div>
    <div class="box-bd">
      <ul>
        <li><img src="./images/1.jpg" alt=""><h4>全防水HABU旋钮</h4><p>¥444.00</p></li>
        <li><img src="./images/1.jpg" alt=""><h4>全防水HABU旋钮</h4><p>¥444.00</p></li>
        <li><img src="./images/1.jpg" alt=""><h4>全防水HABU旋钮</h4><p>¥444.00</p></li>
        <li><img src="./images/1.jpg" alt=""><h4>全防水HABU旋钮</h4><p>¥444.00</p></li>
      </ul>
    </div>
  </div>
</body>
</html>

作业一：把旧布局改成 flex 布局

为什么需要：以前做这个效果时，中间容易出现缝隙；用 flex 可以让子项在同一行内紧挨排列，减少多余间距。

怎么想：先判断谁是“父亲”。flex 加在父容器上，由父亲控制直接子元素。转写稿里反复强调“亲爸爸才能控制亲儿子”，不能隔代加。

怎么做：给父盒子写 display: flex;，需要两端分布时再加 justify-content: space-between;。如果只是紧挨，可用默认的 flex-start 或按效果调整主轴对齐。

.father {
  display: flex;
  justify-content: space-between;
}

易错点：flex 加到子元素上无效；加到爷爷身上也控制不了孙子；flex 默认不换行，子项多时会挤在一行。

作业二：1245×473 大盒子的 flex 布局

为什么需要：大盒子内部往往要分成上下或左右多块，用 flex 能更直接地控制主轴排列和侧轴对齐。

怎么想：先定大盒子宽高：宽 1245、高 473；再判断内部结构。转写稿的调试过程是：先给大盒子宽高和背景，再给内部父级加 display: flex;。如果发现子项默认靠上，是因为侧轴默认 stretch，需要居中就写 align-items: center;，需要底部就写 align-items: flex-end;。

怎么做：父级加 flex，主轴用 justify-content，侧轴用 align-items。多行时再加 flex-wrap: wrap;。

.box {
  width: 1245px;
  height: 473px;
}
.inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

易错点：align-items 不是 allan items；默认拉伸不是默认顶部；不要给所有盒子都盲目加 flex，原本上下标准流能完成的，不必强行 flex。

作业三：京东效果 1150×390，左中右各 350

为什么需要：这是典型三列布局，左、中、右三个盒子各 350px，大盒子 1150×390，用 flex 一行排列最直接。

怎么想：大盒子是父亲，三个子盒子是直接子元素。总宽 350×3=1050，大盒子 1150，剩余空间可通过主轴分布产生间距。转写稿中类似调试是：给父亲 display: flex; 后，再用 space-between 让两端贴边。

怎么做：大盒子设宽高，内部写 display: flex; justify-content: space-between;，三个子盒写 width: 350px;，里面图片设 width: 100%; 填充。

.jd {
  width: 1150px;
  height: 390px;
  display: flex;
  justify-content: space-between;
}
.jd .item {
  width: 350px;
}
.jd .item img {
  width: 100%;
}

易错点：三个 350 加间距不能超过 1150；图片不设宽度会溢出；flex 必须加在直接父级上。

通用调试：亲爸爸、换行与悬停阴影

为什么需要：转写稿里多次出现“给 box-BD 加 flex 不生效”，原因是 li 的亲爸爸是 ul，不是外层盒子。多行排列还必须加 flex-wrap: wrap;，否则写 8 个也挤一行。

怎么想：先找直接父级；一行放不下就允许换行；鼠标悬停阴影用 :hover，需要整体点击可用 a 包住 li。

怎么做：

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list li:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

易错点：flex-wrap 拼写；space-between 不是“比吞”；用 a 包 li 后记得去下划线。

代码示例

示例一：Flex 主轴 / 侧轴对齐

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* 给父亲添加 flex */
      display: flex;

      /* 主轴的排列方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* 让子盒子居中对齐 */
      /* justify-content: center; */
      /* 两侧没缝隙 */
      /* justify-content: space-between; */
      /* 两倍缝隙 */
      /* justify-content: space-around; */
      justify-content: space-evenly;

      /* 侧轴的对齐方式 */
      /* 顶部对齐 */
      /* align-items: flex-start; */
      /* 底部对齐 */
      /* align-items: flex-end; */
      /* 居中对齐 */
      /* align-items: center; */
      /* 默认的 拉伸和父亲一样 */
      align-items: stretch;

      width: 900px;
      height: 500px;
      background-color: pink;
    }

    .box div {
      width: 249px;
      /* height: 200px; */
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

关键行与易错点

• display: flex 必须写在父元素上，子元素才会自动挤压或拉伸；写在子元素上没有效果。
• justify-content 控制主轴（默认水平）排列，口诀：两侧没缝隙是 between、缝隙一样大是 evenly、2 倍缝隙是 around，开发中最常用 space-between。
• align-items 控制侧轴 / 交叉轴（默认垂直）对齐，作用于容器内所有弹性盒子；只控制某一个盒子要用 align-self（写在弹性盒子上）。
• 易错点：align-items 的默认值是 stretch（拉伸铺满容器），所以示例里把子盒子的 height 注释掉，子盒子会自动和父亲一样高——不是“靠上对齐”。
• Flex 布局不会产生浮动布局的脱标现象，布局更简单灵活。

---

示例二：盒子水平 + 垂直居中（经典面试题）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      /* 利用flex实现 */
      display: flex;
      /* 主轴水平居中 */
      justify-content: center;
      /* 侧轴水平居中 */
      align-items: center;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

关键行与易错点

• 只需给父盒子写三句：display: flex + justify-content: center（主轴水平居中）+ align-items: center（侧轴垂直居中），子盒子不用写任何居中代码。
• 易错点：这三句全部写在父亲身上，不要写到 .son 上；父元素没有高度时 align-items: center 看不出效果，所以父亲必须给 height。
• 这是“一个子盒子在父盒子中水平垂直居中”的第一种解法，后面还会学到定位等其他写法。

---

示例三：综合案例「新鲜好物」（完整版）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .box {
      width: 1240px;
      height: 540px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    .box-hd {
      /* 给父亲添加 flex 里面的孩子  h2 和 a 可以一行显示 */
      display: flex;
      /* 两侧没缝隙 主轴对齐 */
      justify-content: space-between;
      /* 侧轴底对齐 */
      align-items: flex-end;
      padding: 40px 0;
    }

    .box-hd h2 {
      font-size: 32px;
      font-weight: 400;
    }

    .box-hd h2 span {
      font-size: 16px;
      color: #999;
    }

    .box-hd a {
      font-size: 16px;
      color: #999;
    }

    .box-bd ul {
      /* 一定是li的亲爸爸 */
      display: flex;
      justify-content: space-between;
    }

    .box-bd li {
      width: 306px;
      height: 406px;
      background-color: skyblue;
      text-align: center;
    }

    .box-bd li img {
      width: 100%;
    }

    .box-bd li h4 {
      font-size: 22px;
      font-weight: 400;
      margin: 12px 0 20px;
    }

    .box-bd li p {
      font-size: 18px;
      color: orangered;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- 头部部分 -->
    <div class="box-hd">
      <h2>新鲜好物
        <span>新鲜出炉 品质靠谱</span>
      </h2>
      <a href="#">查看更多> </a>
    </div>

    <!-- 主体部分 -->
    <div class="box-bd">
      <ul>
        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

关键行与易错点

• 大盒子 .box 不加 display: flex：头部和主体本来就是上下关系，属于标准流；只有“一行上排多个”才用 flex。.box 用 margin: 100px auto 让整个版心水平居中。
• .box-hd 加 display: flex 后，h2（块元素，本来独占一行）和 a 才能在一行显示；justify-content: space-between 让标题贴左、查看更多贴右，两侧没缝隙。
• .box-hd 用 align-items: flex-end 实现底部对齐（文字底对齐）；上下间距用 padding: 40px 0 撑出来，不用给高度、不用行高，文字自然垂直居中，这是本案例的巧思。
• span 必须写在 h2 里面，否则会继承不到字号；再单独用 .box-hd h2 span 改 16px 灰色。
• 最核心的易错点：display: flex 一定要加在 li 的亲爸爸 ul 上，不能加到 .box-bd 上——父控子必须是亲父子，不能隔辈，加错位置 li 根本不会排到一行。
• img 设置 width: 100% 让它和盒子一样宽，否则原图会撑破 306px 的 li；li 上写 text-align: center 让图片和文字一起水平居中。
• 想让 8 个 li 自动换行，需要给 ul 再加 flex-wrap: wrap，因为弹性盒子默认只在一行显示。

常见错误

1. 四个 li 死活不在一行，或者给 .box-bd 加了 flex 没反应

• 现象：display:flex 写在了 .box-bd 上，四个 li 依然竖着排。
• 原因：flex 只作用于直接子元素。.box-bd 的直接子元素是 ul，li 是孙子，隔代了。
• 修法：把 display:flex 挪到 ul 上（谁的亲爸爸谁加），.box-bd 保持标准流。

2. 子盒子高度写死也不对，或者不写高度就被拉满

• 现象：注释掉子盒子的 height 后，三个盒子全都和父容器一样高。
• 原因：侧轴默认值是 stretch，不是 flex-start，子元素没高度时被拉伸铺满。
• 修法：想要顶部对齐写 align-items: flex-start，居中写 center；只有需要等高分栏时才保留默认拉伸。

3. 标题和"查看更多"贴在一起，一左一右没生效

• 现象：h2 和 a 已经在一行了，但两个紧挨着挤在左边。
• 原因：只写了 display:flex，主轴排列方式仍是默认的 flex-start。
• 修法：补 justify-content: space-between；若要两端无缝隙，就用它，别用 around / evenly。

4. 一行里字号不同，文字看起来"一高一低"

• 现象：h2 32px 与 a 16px 并排，视觉上 16px 那条偏高。
• 原因：侧轴是 stretch / flex-start，两个盒子按盒子边缘对齐，字号不同就错位。
• 修法：给父容器加 align-items: flex-end，让侧轴底对齐；配合 padding: 40px 0 撑出上下间距，不必再写死高度。

5. 复制成 8 个卡片后，整行被撑破 / 溢出父容器

• 现象：不管子元素宽度写多少，全都挤在一行里出界。
• 原因：flex 默认 flex-wrap: nowrap，一行放不下也不换行，只会压缩或溢出。
• 修法：给父容器加 flex-wrap: wrap，再用 margin（或 gap）控制多行之间的间距。

6. 给某个子盒子单独写 justify-content 想让它靠右，无效

• 现象：在子元素上写 justify-content: flex-end，毫无反应。
• 原因：justify-content / align-items 是容器属性，写在弹性盒子上不生效；而且主轴方向无法单独控制某一个子元素。
• 修法：整体分布写父容器的 justify-content；只调某个子元素的侧轴位置，用子元素自己的 align-self。

练习

练习 1｜头部条（对齐综合） 还原"新鲜好物 / 新鲜出炉 品质靠谱 / 查看更多>"：h2 内嵌 span，右侧 a 链接。要求一行显示、左右两端贴边、文字底对齐、上下留 40px 内边距、去掉链接下划线。写完后回答：这三句 CSS 各解决了什么问题？

练习 2｜卡片列表（换行） 先写 4 个 li（306×406，图 100%、h4、价格 p，整体 text-align:center），用 flex 让它们一行排开且首尾贴边、中间缝隙均分。然后复制成 8 个，观察溢出后加 flex-wrap: wrap 使其变成两行，并让第二行与第一行保持同样的间距和纵向间隔。

练习 3｜居中与单独对齐 ① 父 300×300、子 200×200，用 flex 让子盒子水平+垂直居中（只用两行声明）。② 把子盒子换成一行三个卡片，让中间那个卡片单独沉到父容器底部，其余两个保持顶部。

练习 4｜排错

.box-bd { display: flex; justify-content: space-between; }
.box-bd li { width: 306px; height: 406px; }

四个 li 竖排、且高度写死也没生效。指出两处错误并改正，说明"父控子"的边界在哪里。

练习 5｜三栏（作业迁移） 大盒子 1150×390，内含左中右三个 350 宽的盒子，用 flex 实现三等分且两端贴边、中间留缝；每栏内填一张图并让图片宽度撑满所在栏。

原视频对照

#	视频	时长
1	盒子水平和垂直居中	09:00
2	综合案例-大盒子制作	05:57
3	综合案例文字修饰	21:47
4	综合案例小li制作	06:10
5	综合案例完成	03:38
6	作业布置	06:35

小结

1. flex 的第一判断不是"要不要用"，而是"加给谁"——永远加在直接父元素上，隔代一律失效。
2. 加 display:flex 只解决"在一行"，剩下的左右分布要靠 justify-content，上下位置要靠 align-items，两者缺一不可。
3. 侧轴默认是 stretch 而非 flex-start，所以"子盒子莫名和父一样高"不是 bug，是不写就是拉伸。
4. space-between 是日常最高频值：两端无缝隙；around 是 2 倍缝、evenly 是均等缝，记住这三句口诀就不会选错。
5. 一个盒子在父容器里居中，两个方向各一句就够了，不需要行高、不需要绝对定位；但只有一个盒子时不必上 flex，标准流 margin: 0 auto 也能干。
6. 需要单独调整某个子元素的侧轴位置时，容器属性救不了你，只能用子元素自己的 align-self。
7. flex 不换行是默认行为，多行卡片必须显式 flex-wrap: wrap，这是从"4 个"扩到"8 个"时唯一要补的一行。
8. 案例的拆解顺序值得固化：先量版心定大盒子 → 再拆上下块 → 再判断哪一块是"一行多个"才上 flex → 最后才调文字与间距。