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

Question

我正在尝试匹配下面的设计。我几乎完成了我的元素，我只需要创建一个部分，其中有 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

Answer 1

确保您针对的是正确的元素，避免将类 (.container-parent) 与 id (#container-parent) 混淆；

不需要 flex-direction: row，因为 row 是该属性的默认值；还可以考虑使用 flex 属性，简写为:flex-grow flex-shrink flex-basis；这将帮助您设置您希望 flex 元素具有的行为和大小。

* {
  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;
}