如何使用 Flexbox 使用特定项目开始新行? [英] How to start a new line with a particular item with Flexbox?

问题描述

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

我需要红色的第 5 个块(bloque 5")位于其他四个使用 Flexbox 的下方.结果应该是:

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

div {边距:5px；边框:1px纯粉色；填充:5px；字体系列:arial、sans-serif；字体大小:14px；}.contenidor {宽度:760px；显示:弹性；}div[类*=元素] {宽度:100%；填充:2px 30px 5px 2px；}.element5 {背景颜色:红色；}

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

解决方案

n 个项目在 flexbox 中的 要点 是 padding还必须考虑 em> 和 margin，因为您要包装 flexbox.我对您的代码进行了以下更改:

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

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

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

• 还考虑在 element* 上添加 box-sizing: border-box 以便 padding 包含在 width(因此在 flex-basis 中)

您可以在这里找到类似的问题:连续排列 5 个项目.请参阅下面的演示:

div {边距:5px；边框:1px纯粉色；填充:5px；字体系列:arial、sans-serif；字体大小:14px；}.contenidor {宽度:760px；显示:弹性；flex-wrap: 包裹;/* 包装 flexbox */}div[类*=元素] {/*宽度:100%；*/填充:2px 30px 5px 2px；box-sizing: 边框框；/* 调整填充 */弹性增长:1；/* 扩展以填充剩余空间 */flex-basis: calc(25% - 10px);/* 每行 4 个项目，调整 5px 边距 */}.element5 {背景颜色:红色；}

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

This is a very simple exercise but I can't seem to find a neat way to solve it (just started learning about HTML and CSS).

I need the 5th block ("bloque 5") in red to be under the other four using Flexbox. The result should be:

Could somebody help me with this, please? This is what I have so far:

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>

解决方案

The gist of having n items in a row with flexbox is that padding and margin must also be considered because you are wrapping the flexbox. I made the following changes in your code:

• for wrapping a flexbox, you need to give flex-wrap: wrap on the flexbox container,

• to get 4 items per row, you can use flex-basis as 25% and adjust for the margin using calc,

• to get the rows with less that 4 items fill the available space, you can consider flex-grow: 1 on the flex items too,

• also consider adding box-sizing: border-box on the element* so that the padding is included in the width (and therefore in flex-basis)

You can find a similar question here: arranging 5 items in a row. See demo below:

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>

这篇关于如何使用 Flexbox 使用特定项目开始新行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！