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

Posted 2023-03-05

【中文标题】如何使用 Flexbox 以特定项目开始新行？

【英文标题】：How to start a new line with a particular item with Flexbox?

【发布时间】：2019-09-11 10:44:51

【问题描述】：

这是一个非常简单的练习，但我似乎找不到解决它的好方法（刚开始学习 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>

【参考方案1】：

n 个项目在一行中 与 flexbox 的 gist 是 padding 和 margin 也必须是考虑是因为您正在 包装 flexbox。我对您的代码进行了以下更改：

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

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

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

还可以考虑在 element* 上添加 box-sizing: border-box，以便 padding 包含在 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>

【参考方案2】：

真的没有理由做这样的事情div[class*=element]只需用点div.element指定类

您的代码不起作用的原因之一是您缺少 box-sizing。 以这种方式添加内边距和边距将使您的孩子长到想要的大小。

在使用 flex 时使用 flex 参数，它会真正简化您的工作。

您可以在此处查看如何使用 flex-box 的好教程 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是一个简单的方法。

 div 
      border: 1px solid black;
       box-sizing: border-box;
    
    
    .parent 
      display: flex;
      flex-wrap: wrap;
      justify-content: stretch;
    
    
    .child 
      flex: 1 0 25%;
    

<div class="parent">
      <div class="child">I am one</div>
      <div class="child">I am two</div>
      <div class="child">I am three</div>
      <div class="child">I am four</div>
      <div class="child">I am five</div>
    </div>

   

【参考方案3】：

* 
  margin: 0;
  box-sizing: border-box;


section 
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;


section > div 
  flex-basis: 25%;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.1);
  text-align: center;


section > div:last-child 
  flex-basis: 100%;

<section>
  <div>
  1
  </div>
  <div>
  2
  </div>
  <div>
  3
  </div>
  <div>
  4
  </div>
  <div>
  5
  </div>
</section>