display: flex 与 flex-direction#

1
#container {
2
  display: flex;        /* ① 开启 flex 布局（写在父容器上） */
3
  flex-direction: row;  /* ② 主轴方向：row 水平（默认值，不写也是它） */
4
}

flex-direction 决定”主轴”朝哪边——主轴的默认值是 row（水平向右），所以只写 display: flex 时，子元素就自动排成一行；改成 column 就变成一列（column 就是”列”的意思）：

1
#container {
2
  display: flex;
3
  flex-direction: column;   /* 主轴方向为 y 轴，垂直向下，子元素从上往下排 */
4
}

justify-content 管的就是沿主轴方向的排列方式：主轴是 row 时它管”左右怎么分布”，主轴换成 column 时它管的就是”上下怎么分布”。

justify-content 的五个取值#

1
#container {
2
  display: flex;
3
  justify-content: space-between;   /* 子元素在主轴上的对齐方式 */
4
}

一、知识回顾（读完直接做下面的实践题）#

1. flex 是 flexible Box 的缩写，意为”弹性布局”，是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力
2. flex 属性写在父容器上，控制的是子元素的位置和排列方式；被控制的父元素叫 Flex Container，里面的子元素叫 Flex item
3. 开启 flex 布局的属性是 display: flex
4. flex-direction 设置主轴方向：row 主轴为 x 轴、水平向右（默认值）；column 主轴为 y 轴、垂直向下
5. justify-content 控制子元素在主轴上的对齐方式，五个取值：flex-start（从头开始排列）、flex-end（从尾部开始排列）、center（在主轴居中对齐）、space-around（平分剩余空间）、space-between（先两边贴边，再平分剩余空间）
6. 做”标题居左、退出登录居右”：父容器加 display: flex + justify-content: space-between，两个子元素自动贴到主轴两端
7. align-items: center 沿交叉轴对齐（主轴水平时它就是”垂直居中”，案例代码里用到）；justify-content 管主轴、align-items 管交叉轴
8. 导航栏案例里 <h1> 要写 margin: 0，因为标题标签自带默认外边距，不删会让导航栏被撑高
9. 案例里链接的样式是 text-decoration: none（去掉下划线）+ color: white；标题用 font-family: "楷体" 和 font-weight: bold
10. justify-content 的效果跟着主轴走：主轴换成 column 之后，它管的就是子元素”从上往下的分布”（比如 center 变成垂直居中）

二、裸写题#

• 2-1 三个方块横向排开，两端贴边、中间均分 容器里有三个方块，要求：横着排成一行，第一个贴着左边、第三个贴着右边，剩下的空间在它们之间的空隙里平分。 （练习文件 test_09_两端贴边.html 里有容器和三个方块，样式写在 head 的样式区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：“横着排” + “两端贴边、中间均分” → 用弹性布局，而且是”先两边贴边再平分”的那个取值 二级 · 方法：父容器加 display: flex（默认主轴就是水平方向）；对齐方式用 justify-content: space-between 三级 · 骨架：#container { display: ____; justify-content: ____; }

  参考答案（做完再点开）

  1
  #container {
  2
    display: flex;                  /* 开启 flex 布局，主轴默认水平向右 */
  3
    justify-content: space-between; /* 先两边贴边，再平分剩余空间 */
  4
  }

  对照课程 11. flex布局.html（那份文件改的就是这一条 justify-content）。注意三个方块不要写 margin——空隙是 flex 自己分出来的。

• 2-2 三个方块的间距要”散得均匀” 同样三个方块横排，这次要求：每个方块左右两侧的留白一样多（所以方块之间的空隙看起来比两端到边缘的距离大一倍）。 （练习文件 test_09_均分间距.html 里有容器和三个方块。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：还是横向排 + 分剩余空间，但这次是”每块两边都留白”，不是”两端贴边” 二级 · 方法：display: flex + justify-content 的 space-around 三级 · 骨架：#container { display: ____; justify-content: ____; }

  参考答案（做完再点开）

  1
  #container {
  2
    display: flex;
  3
    justify-content: space-around;   /* 平分剩余空间：每个元素两侧留白相等 */
  4
  }

  space-around 与 space-between 的差别就在两端：space-between 两端贴边（第一个元素左边没有空隙），space-around 两端也留白（等于相邻间隙的一半）。PPT 上这两个取值的描述分别是”平分剩余空间”和”先两边贴边，再平分剩余空间”。

• 2-3 让三个方块竖着排，并且整体上下居中 容器高度 300px，里面三个方块现在横着排。要求：改成从上往下竖着排，而且这一列在容器里上下居中。 （练习文件 test_09_竖排居中.html 里有容器和三个方块。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：排列方向由”主轴”决定，改主轴方向就能从横排变竖排；居中仍然是 justify-content，只是这次它沿的主轴变成了上下方向 二级 · 方法：flex-direction 改成 column（y 轴、垂直向下）；justify-content 用 center 三级 · 骨架：#container { display: flex; flex-direction: ____; justify-content: ____; }

  参考答案（做完再点开）

  1
  #container {
  2
    display: flex;
  3
    flex-direction: column;   /* 主轴方向为 y 轴，垂直向下 */
  4
    justify-content: center;  /* 子元素在主轴（此时是上下方向）居中对齐 */
  5
  }

  验证一下 justify-content “跟着主轴走”：把 flex-direction 换回 row，center 就变成水平居中了。课件里那句”子元素在主轴上的对齐方式”，就是提醒你别把它当成固定的”左右对齐”。

三、综合题#

• 3-1 照着课程案例做 Tlias 的顶部导航栏 练习文件里已经给了 <div class="navbar">（里面一个标题和一个”退出登录”链接）。按步骤做：

  1. 让标题和退出登录排到同一行：给导航栏开启弹性布局
  2. 一行分两端：标题贴左、退出登录贴右（一条属性）
  3. 上下也要对齐：让两个子元素在导航栏里垂直居中
  4. 留白与底色：四边内边距 10px；背景色 #b5b3b3
  5. 标题样式：去掉 <h1> 自带的上下外边距、白色、加粗、字体”楷体”（font-family: "楷体"）
  6. 链接样式：白色、去掉下划线
  7. 观察题：把第 1~3 步里的 flex-direction 临时改成 column，刷新看效果——说明为什么”标题居左、退出登录居右”在这时就不成立了
  提示（先自己想，实在想不出再点开）

  一级 · 思路：导航栏就是一个”一行两格”的弹性容器；第 1~3 步全是写在父容器 .navbar 上的属性 二级 · 方法：display: flex / justify-content: space-between / align-items: center / padding / background-color；标题 margin: 0、color: white、font-weight: bold、font-family；链接 color: white、text-decoration: none 三级 · 骨架：.navbar { display: ____; justify-content: ____; align-items: ____; padding: ____; background-color: ____; }

  参考答案（做完再点开）

  1
  <style>
  2
    /* 导航栏样式 */
  3
    .navbar {
  4
      background-color: #b5b3b3;        /* 灰色背景 */
  5
      display: flex;                    /* flex弹性布局 */
  6
      justify-content: space-between;   /* 左右对齐 */
  7
      padding: 10px;                    /* 内边距 */
  8
      align-items: center;              /* 垂直居中 */
  9
    }
  10
    .navbar h1 {
  11
      margin: 0;                        /* 移除默认的上下外边距 */
  12
      font-weight: bold;                /* 加粗 */
  13
      color: white;
  14
      font-family: "楷体";
  15
    }
  16
    .navbar a {
  17
      color: white;                     /* 链接颜色为白色 */
  18
      text-decoration: none;            /* 移除下划线 */
  19
    }
  20
  </style>
  21
  <body>
  22
    <div class="navbar">
  23
      <h1>Tlias智能学习辅助系统</h1>
  24
      <a href="#">退出登录</a>
  25
    </div>
  26
  </body>

  显示更多显示更少

  第 7 步的答案：flex-direction: column 把主轴换成了上下方向，justify-content 的”两端贴边”就变成”上端贴顶、下端贴底”，两个子元素也就一上一下竖着排了——space-between 本身没变，变的是它作用的那条轴。