显示：flex 不工作 - 如何创建两列响应式表格？

Question

我对 HTML/CSS 非常陌生，我一直在关注这个 教程视频。 @视频的 42:10 -- 当我尝试“display: flex”在两列中列出技能时，它最终会出现在中心对齐的一列中（请参见下面的屏幕截图和我的代码）。我想知道有谁知道为什么它对我不起作用/我做错了什么？谢谢！！

.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);
}

<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>

Answer 1

你的代码很完美，你有两个列中的菜单，你只需要向 skills__content 类添加一些 CSS 规则即可使它们出现在行中。

添加另一个显示柔性并将其居中

.skills__content {
  row-gap: 3.5rem;
  display: flex; /* Show in rows */
  justify-content: center;
  gap:20px
}

.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);
}

<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>