如何使用 Flexbox 使用特定项目开始新行？

Question

这是一个非常简单的练习，但我似乎找不到解决它的巧妙方法（刚开始学习 HTML 和 CSS）。

我需要使用 Flexbox 将红色的第 5 个块（“bloque 5”）置于其他四个块之下。结果应该是：

有人可以帮我解决这个问题吗？这是我到目前为止：

div {
  margin: 5px;
  border: 1px solid pink;
  padding: 5px;
  font-family: arial, sans-serif;
  font-size: 14px;
}

.contenidor {
  width: 760px;
  display: flex;
}

div[class*=element] {
  width: 100%;
  padding: 2px 30px 5px 2px;
}

.element5 {
  background-color: red;
}

<div class="contenidor">
  <div class="element1">bloque 1</div>
  <div class="element2">bloque 2</div>
  <div class="element3">bloque 3</div>
  <div class="element4">bloque 4</div>
  <div class="element5">bloque 5</div>
</div>

Answer 1

该要点具有连续n项与Flexbox的是，填充和利润率也必须加以考虑，因为你是包装的Flexbox的。我在您的代码中进行了以下更改：

• 为了包装一个 flexbox，你需要flex-wrap: wrap在flexbox 容器上提供，

• 要获得每行 4 个项目，您可以使用flex-basis25% 并使用 调整边距calc，

• 要获得少于 4 个项目的行填充可用空间，您也可以考虑flex-grow: 1使用flex 项目，

• 还可以考虑添加box-sizing: border-box，element*以便将填充包含在宽度中（因此包含在中flex-basis）

你可以在这里找到一个类似的问题：arranging 5 items in a row。请参阅下面的演示：

div {
  margin: 5px;
  border: 1px solid pink;
  padding: 5px;
  font-family: arial, sans-serif;
  font-size: 14px;
}

.contenidor {
  width: 760px;
  display: flex;
  flex-wrap: wrap; /* wrapping flexbox */
}

div[class*=element] {
  /*width: 100%;*/
  padding: 2px 30px 5px 2px;
  box-sizing: border-box; /* adjusts for padding */
  flex-grow: 1; /* expand to fill remaining space */
  flex-basis: calc(25% - 10px); /* 4 items per row, adjust for the 5px margin */
}

.element5 {
  background-color: red;
}

<div class="contenidor">
  <div class="element1">bloque 1</div>
  <div class="element2">bloque 2</div>
  <div class="element3">bloque 3</div>
  <div class="element4">bloque 4</div>
  <div class="element5">bloque 5</div>
 </div>