管理justify-content：最后一行之间的空格 [英] Managing justify-content: space-between on last row

问题描述

我打算每行有三个弹性项目，并在之间使用空格，以便每行的第一个和第三个项目触及容器的外部，但保持等距。

这是按照预期工作的，但当第五项不按我想要的方式排列在第二行时，会出现问题。我将有一个可变数量的内容，所以需要布局与任何数量的箱子。

我已经显示我的代码如下。谁能告诉我如何解决这个问题？

.main {background：＃ 999;保证金：0汽车;宽度：1300px;显示：弯曲; flex-wrap：wrap; justify-content：space-between;}。box {background：＃7ab9d7;颜色：＃555;身高：300px;宽度：30％; margin-bottom：30px; text-align：center; font-size：30px; < div class =

解决方案

<使用一个不可见的伪元素，占据容器中的最后一个槽：



  .main :: after {
高度：0; 
宽度：30％; 
内容：; 
 
 
 
 
 
 $ b 
高度是0，这样当行被填充时，伪元素开始下一行，它不会将高度添加到容器。
 
 
 
完整的代码：
 
 
 
 
 
 
  .main {background：＃999;保证金：0汽车;宽度：500px;显示：flex; flex-wrap：wrap; justify-content：space-between;}。box {background：＃7ab9d7;颜色：＃555; height：30px;宽度：30％; margin-bottom：30px; text-align：center; font-size：30px; padding-top：120px;}。main :: after {height：0;宽度：30％;内容：;}  
 
 < div class =主> < div class =box> 1< / div> < div class =box> 2< / div> < div class =box> 3< / div> < div class =box> 4< / div> < div class =box> 5< / div>< / div>  

I am aiming to have three flex items per row and use space-between so the first and third items in each row touch the outside of the container but remain equally spaced.

This works as intended but the problems arise in the second row when the fifth item doesn't align as I want, directly below the second item. I will have a variable amount of content so need the layout to work with any number of boxes.

I have shown my code below. Can anyone tell me how to fix this?

.main{
    background: #999;
    margin:0 auto;
    width:1300px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.box{
    background: #7ab9d7;
    color: #555;
    height: 300px;
    width: 30%;
    margin-bottom: 30px;
    text-align: center;
    font-size: 30px;
    padding-top: 120px;
}

<div class="main">
         
          <div class="box">1</div>
          <div class="box">2</div>
          <div class="box">3</div>
          <div class="box">4</div>
          <div class="box">5</div>
         
</div>

解决方案

Use an invisible pseudo-element that occupies the last slot in the container:

.main::after {
  height: 0;
  width: 30%;
  content: "";
}

The height is 0 so that when rows are filled, and the pseudo-element starts the next line, it doesn't add height to the container.

Full code:

.main {
  background: #999;
  margin: 0 auto;
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  background: #7ab9d7;
  color: #555;
  height: 30px;
  width: 30%;
  margin-bottom: 30px;
  text-align: center;
  font-size: 30px;
  padding-top: 120px;
}
.main::after {
  height: 0;
  width: 30%;
  content: "";
}

<div class="main">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

这篇关于管理justify-content：最后一行之间的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！