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

问题描述 投票:1回答:3

这是一个非常简单的练习,但我似乎找不到一个简洁的方法来解决它(刚开始学习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>
html css css3 flexbox alignment
3个回答
© www.soinside.com 2019 - 2024. All rights reserved.