html - 如何使用flexbox在两行中的每行中创建3个框？

我正在尝试匹配以下设计。我的项目已经接近完成，我只需要创建一个部分，其中有6个具有不同颜色的框，如下所示：

enter image description here

目前，您可以在下面的代码栏中看到我的内容
https://codepen.io/JoyFulCoding/pen/EzWyKv

我需要一个如上所示的部分，其中有6个框分布在两行中，即每行有3个框

#container-parent {
  display: flex;
  flex-direction: row;
  background-color: red;
  flex-wrap: wrap;
}

.container-parent>div {
  background-color: blue;
  width: 33%;
  text-align: center;
}

<section id="container-parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

我认为以上遵循此后将工作：
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-direction_row

等等，但是它不起作用。任何指针将不胜感激，谢谢。

https://codepen.io/JoyFulCoding/pen/EzWyKv

最佳答案

确保您定位的是正确的元素，避免将类（.container-parent）与ID（#container-parent）混淆；

不需要flex-direction: row，因为row是该属性的默认值。还可以考虑使用flex属性，即flex-grow flex-shrink flex-basis;的简写。这将帮助您设置所需的弹性物品的行为和尺寸。

* {
  box-sizing: border-box;
}

#container-parent {
  display: flex;
  background-color: red;
  flex-wrap: wrap;
}

#container-parent>div {
  background-color: blue;
  min-height: 100px;
  flex: 1 0 33%;
  text-align: center;
  border: 1px solid black;
}

<section id="container-parent">
  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>
</section>

对于有关居中文本的问题，请尝试使用以下方法更改规则：

#container-parent>div {
  display:flex;
  color:white;
  background-color: blue;
  min-height: 350px;
  flex: 1 0 33%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family:"Raleway" , sans-seriff;
}

关于html - 如何使用flexbox在两行中的每行中创建3个框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56177148/