display: flex 失效，如何创建响应式双列技能列表？

我是HTML/CSS新手，正在跟随教程视频学习。在视频42:10处，我尝试用display: flex将技能列表展示为双列，但最终只呈现出居中对齐的单列（见截图）。请问原因是什么/我哪里出错了吗？

我的代码 #

CSS代码 #

.skills__content {
  row-gap: 3.5rem;
}

.skills__title {
  font-size: var(--h3-font-size);
  text-align: center;
  margin-bottom: 1.5rem;
}

.skills__box {
  display: flex;
  justify-content: center;
  column-gap: 3rem;
}

.skills__group {
  display: grid;
  align-content: flex-start;
  row-gap: 1rem;
}

.skills__data {
  display: flex;
  column-gap: .5rem;
}

.skills__data {
  display: flex;
  column-gap: .5rem;
}

.skills__data i {
  font-size: 1.2rem;
  color: var(--first-color);
}

.skills__name {
  font-size: var(--normal-font-size);
  font-weight: 500;
  line-height: 18px;
}

.skills__level {
  font-size: var(--smaller-font-size);
}

HTML代码 #

<div class="skills__content grid" data-content id="skills">
  <div class="skills__area">
    <h3 class="skills__title">
      Front-End Developer
    </h3>

    <div class="skills__box">
      <div class="skills__group">
        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">HTML</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">CSS</h3>
            <span class="skills__level">Advanced</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">JavaScript</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">React</h3>
            <span class="skills__level">Intermediate</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Bootstrap</h3>
            <span class="skills__level">Intermediate</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Git</h3>
            <span class="skills__level">Intermediate</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="skills__area">
    <h3 class="skills__title">
      Back-End Developer
    </h3>

    <div class="skills__box">
      <div class="skills__group">
        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Python</h3>
            <span class="skills__level">Advanced</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Golang</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Java</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">C++</h3>
            <span class="skills__level">Advanced</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">SQL</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

核心问题 #

你当前的代码里，每个skills__box容器下只有一个skills__group子元素，flex布局需要至少两个子元素才能形成多列。教程里的双列效果，是把单个技能组的内容拆成两个skills__group，放在同一个skills__box下，这样flex才能将它们横向排列。

修复步骤 #

1. 修改HTML结构 #

以Front-End部分为例，把原来的6个技能项拆成两个skills__group，都放入skills__box中：

<div class="skills__box">
  <!-- 第一个技能组 -->
  <div class="skills__group">
    <div class="skills__data">
      <i class="ri-checkbox-circle-line"></i>
      <div>
        <h3 class="skills__name">HTML</h3>
        <span class="skills__level">Basic</span>
      </div>
    </div>
    <div class="skills__data">
      <i class="ri-checkbox-circle-line"></i>
      <div>
        <h3 class="skills__name">CSS</h3>
        <span class="skills__level">Advanced</span>
      </div>
    </div>
    <div class="skills__data">
      <i class="ri-checkbox-circle-line"></i>
      <div>
        <h3 class="skills__name">JavaScript</h3>
        <span class="skills__level">Basic</span>
      </div>
    </div>
  </div>
  <!-- 第二个技能组 -->
  <div class="skills__group">
    <div class="skills__data">
      <i class="ri-checkbox-circle-line"></i>
      <div>
        <h3 class="skills__name">React</h3>
        <span class="skills__level">Intermediate</span>
      </div>
    </div>
    <div class="skills__data">
      <i class="ri-checkbox-circle-line"></i>
      <div>
        <h3 class="skills__name">Bootstrap</h3>
        <span class="skills__level">Intermediate</span>
      </div>
    </div>
    <div class="skills__data">
      <i class="ri-checkbox-circle-line"></i>
      <div>
        <h3 class="skills__name">Git</h3>
        <span class="skills__level">Intermediate</span>
      </div>
    </div>
  </div>
</div>

Back-End部分同理，把5个技能项拆成两个skills__group（比如2个+3个）即可。

2. 确认CSS无需额外修改 #

你的skills__box已经设置了display: flex和column-gap: 3rem，只要子元素数量≥2，flex就会自动横向排列它们，加上justify-content: center会让整体居中，正好符合双列居中的需求。

额外优化 #

如果想让两个技能组宽度一致，可以给skills__group添加flex: 1属性，让它们平分skills__box的可用宽度：

.skills__group {
  display: grid;
  align-content: flex-start;
  row-gap: 1rem;
  flex: 1; /* 新增 */
}

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