Question

我有一个元素网格，我想要平均分为3.所以我希望每行包含3个元素。因为我希望它们具有相同的装订线，所以在使用flexbox时我使用了justify-content: space-between。这看起来不错，直到我注意到当最后一行包含2个元素时，它们才会分开。

＆＃13;

.blue{
  width: 420px;
  height: 230px;
  background: blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.red{
  width: 32%;
  height: 100px;
  background: red;
  display: block;
  border-sizing: border-box;
  border: 1px solid white;
}

.green{
  width: 420px;
  height: 230px;
  background: green;
  display: flex;
  flex-wrap: wrap;
}

.orange{
  width: 32%;
  height: 100px;
  background: orange;
  display: block;
  border-sizing: border-box;
  border: 1px solid white;
  margin-right: 1.25%;
}

.orange:nth-child(3){
  margin-right: 0;
}

＆＃13;

<section class="blue">
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
</section>

<section class="green">
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
</section>

＆＃13;

我的第二种方法似乎解决了大部分问题，但我希望它能够做出响应，并以2行的形式分解，并在移动中以1行的形式分解，然后这样也会关闭。有没有什么可以解决这个没有JavaScript？我一直在寻找根据元素数量的长度添加课程，但这似乎是不专业的...在这种情况下，我可能还有一些我不知道的东西可以帮助我。

Answer 1

您可以使用flex:1; + min-width创建断点。

您还可以使用伪元素填充最后一行的一部分。

＆＃13;

.blue{
  background: blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding:1em;
}

.red, .blue:after{
  content:'';
  min-width:280px;
  flex:1;
  margin:0 1em;
}
.red {
  margin:1em;
  height: 100px;
  background: red;
  display: block;
  box-sizing: border-box;
  border: 1px solid white;
}

＆＃13;

<section class="blue">
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
</section>

＆＃13;

通常，mediaqueries用于在CSS中设置断点：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

网格的最后一个孩子得到了巨大的gutter导致flexbox空间介于两者之间

1 个答案: