html - 如何使用 Flexbox 以特定元素开始新行？

Question

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

我需要红色的第 5 个 block (“bloque 5”)在其他四个使用 Flexbox 的下方。结果应该是:

有人可以帮我解决这个问题吗？这是我目前所拥有的:

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

要点使用 flexbox 将 n 个元素排成一行是 padding 和 margin 也必须是考虑是因为您正在包装 flexbox。我对您的代码进行了以下更改:

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

• 要获得每行 4 个元素，您可以使用 flex-basis 作为 25%，并使用 calc 调整边距，

  <

• 要让少于 4 个元素的行填充可用空间，您可以考虑在 flex 元素<上使用flex-grow: 1/em> 也是，

• 还考虑在 element* 上添加 box-sizing: border-box，以便 padding 包含在 < em>width(因此在 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>