Flex-grow 使最后一行的宽度正确

Question

所以我有一个包含一些盒子的弹性盒子。所有的盒子都占据了三分之一的宽度。因为我使用 flex-grow 我的最后一个元素不会坚持其列的大小。我明白为什么会这样，但我不想使用最大宽度，因为指定的宽度通常不太好。任何建议都会被采纳！

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

我想要发生的事情：

代码在这里 - 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

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

Flex-grow 使最后一行的宽度正确

Flex-grow making last row correct width

html

css

flexbox

responsive-design

flex-grow