小编Car*_*Lin的帖子

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

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

连续 5 块

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

连续 4 个块，另一排 1 个

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html css alignment flexbox

Car*_*Lin

2019 04-22

2
推荐指数

1
解决办法

577
查看次数