灵活增长使最后一行的宽度正确

Question

所以我有一个包含一些盒子的弹性盒子。所有盒子占宽度的三分之一。由于我使用了flex-grow，所以我的最后一个元素将不会停留在其列的大小上。我知道为什么会这样，但是我不想使用max-width，因为指定的宽度通常不太好。任何建议都将适用！

这是当前正在发生的事情：

我想发生的事情：

CODEPEN HERE-https://codepen.io/matt-priestley/pen/ZmXqzr

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>

Answer 1

从类 .boxes

中删除flex-grow: 3;

这是更新的代码段：

body {
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  /*flex-grow: 3;*/
  flex-basis: 33.3%;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 200px;
}

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>

Answer 2

我继续进行操作，并将flex-grow更改为auto，如下所示，它似乎工作正常。或者，您也可以将其完全删除，因为在这种情况下没有必要。

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  flex-grow: auto;
  flex-basis: 33.3%;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 200px;
}

P.S。我知道您并没有要求这样做，但是如果您想固定边框以免边框重叠，也可以这样做：

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  flex-basis: 33.3%;
  min-width: 200px;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
}

.boxes:nth-of-type(3n+1) {
  border-left: 2px solid black;
}

.boxes:nth-of-type(-n+3) {
  border-top: 2px solid black;
}

希望这会有所帮助！

Answer 3

使用flex-wrap:wrap并将每个框的宽度设置为33％-（margin_size）

.container{
  display: flex;
  flex-wrap: wrap;
}

.boxes{
  width: calc(33% - 20px);
  height: 180px;
  background-color: #3C79D1;
  border: 2px solid #003C92;
  margin: 10px;
  box-sizing: border-box;
}

li{
  list-style-type: none;
}

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>