Flex-grow 使最后一行的宽度正确[重复]答案

【问题标题】：Flex-grow making last row correct width [duplicate]Flex-grow 使最后一行的宽度正确[重复]
【发布时间】：2019-04-21 17:17:35
【问题描述】：

所以我有一个包含一些盒子的弹性盒子。所有的盒子都占据了三分之一的宽度。由于我使用了 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>

【问题讨论】：

标签： html css responsive-design flexbox flex-grow

【解决方案1】：

从类.boxes

中删除flex-grow: 3;

这里是更新的sn-p：

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>

【讨论】：

顶级人物！谢谢！
欢迎！！！ @Matt 如果它适合你，请接受我的回答:)
我刚刚注意到，当列下降到两个时，框不再“增长”并且它们停留在 200 像素的最小宽度上。有没有办法解决这个问题？
设置弹性基础：50%；在类 .boxes 上的移动媒体查询中

【解决方案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;
}

附：我知道您没有要求这样做，但如果您想修复边框以使其不重叠，您也可以这样做：

* {
  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;
}

希望这会有所帮助！

【讨论】：

【解决方案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>

【讨论】：