Flex布局问题咨询：文本垂直居中与空白区域填充

一、让第一个box的数字1垂直居中 #

你之前用的vertical-align: middle对块级元素无效，要实现flex容器子元素内部的文本垂直居中，最简单的方式是把box本身变成flex容器，利用flex的对齐属性：

修改.box的CSS样式，添加以下两行：

.box {
  /* 原有样式保留 */
  display: flex;          /* 把box变成flex容器 */
  align-items: center;    /* 内部元素垂直居中 */
  /* 可选：如果需要水平居中，也可以加 justify-content: center，和text-align: center效果一致 */
}

原理：当box是flex容器时，里面的文本会被当成一个flex项，align-items: center会让这个项在垂直方向（交叉轴）上居中对齐，完美解决400px高的box里文本垂直居中的问题。

二、让其他box填充第一个box下方的空白 #

现在的布局里，第一个box高度400px，导致第一行下方有大量空白，要让其他box填满这块区域，我们需要调整flex容器的排列方向和换行逻辑：

方案步骤： #

1. 给flex容器设置固定高度（等于第一个box的高度400px），让flex项在垂直方向上换行：

.flex-container {
  /* 原有样式保留 */
  height: 400px;          /* 容器高度和第一个box一致 */
  flex-direction: column; /* 主轴改为垂直方向，从上到下排列 */
  flex-wrap: wrap;        /* 垂直方向空间不足时，自动换列 */
}

2. 给第一个box设置flex-shrink: 0，防止它被压缩：

.box:nth-child(1) {
  flex-shrink: 0; /* 不让第一个box被压缩，保持400px高度 */
}

这样修改后，第一个box会占据左侧第一列的全部高度，其他box会从第二列开始，从上到下排列，空间不足时自动换列，刚好填满第一个box右侧和下方的所有空白区域。

完整修改后的代码 #

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+*/
        flex-direction: column; /* 改为垂直主轴 */
        flex-wrap: wrap;
        max-width: 700px;
        height: 400px; /* 设置容器高度和第一个box一致 */
      }
      .box {
        color: white;
        margin: 10px;
        width: 200px;
        height: fit-content;
        font-size: 50px;
        text-align: center;
        background-color: steelblue;
        display: flex; /* 内部文本垂直居中 */
        align-items: center;
        justify-content: center;
      }
      .box:nth-child(1) {
        height: 400px;
        flex-shrink: 0; /* 禁止压缩 */
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </body>
</html>

通俗讲解 #

• 关于垂直居中：把每个box变成小的flex容器，就像给文本找了个“弹性盒子”，盒子会自动把里面的内容往中间挤，不管盒子有多高。
• 关于填充空白：把大容器的排列方向改成“从上到下堆”，空间不够就往右边列堆，第一个box占满左边列的高度，其他box就会自动填满右边和下面的所有空隙，不会留空白。

内容的提问来源于stack exchange，提问作者Will73