Question

我的目标是每行有三个弹性项目并使用space-between，因此每行中的第一个和第三个项目会触及容器的外部，但保持相等的间距。

这可以按预期工作，但当第五个项目没有按照我想要的方式对齐时，问题会出现在第二行，直接位于第二个项目的下方。我将拥有可变数量的内容，因此需要布局才能使用任意数量的框。

我在下面显示了我的代码。有谁能告诉我如何解决这个问题？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

高度为0，因此当填充行时，伪元素开始下一行时，它不会向容器添加高度。

完整代码：

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

管理对齐内容：最后一行之间的空格

1 个答案: