防止最后一行中的flex项目变得比其他flex项目大[重复]

Question

这个问题在这里已有答案：

• Targeting flex items on the last or specific row 3回答

我有flex容器和flex项目定义如下：

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;   
  display: flex; 
  flex-wrap: wrap; 
}

.flex-item {
  background: tomato;
  padding: 5px;     
  height: 150px;
  margin-top: 10px;  
  margin-right: 5px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  flex: 1 0 200px;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10</li>
  <li class="flex-item">11</li>
  <li class="flex-item">12</li>
  <li class="flex-item">13</li>
  <li class="flex-item">14</li>
</ul>

如果最后一行中的项目很少，则它们会被拉伸并且宽度大于上排中的项目。

正如您在图像中看到的那样，方框13和14的宽度更大。

是否可以使最后一行中的项目与上行中的项目大小相同？

Answer 1

添加隐形弹性项目是最受欢迎的方式。它保留了所有flex好东西，并且是一个明确有意义的hack。

.hidden-flex-item {
    content: "";
    flex: 1 0 200px;
    padding: 5px;     
    margin-top: 10px;  
    margin-right: 5px;
    visibility: hidden;
}

在这里小提琴：https://jsfiddle.net/px37t2jc/9/

如果你花时间学习它，Css网格也可以轻松处理这类问题。

Answer 2

如果你知道方框1-12的宽度是什么（如果有你想要的设定宽度，或者只是用chrome dev工具检查并获得宽度），那么将max-width: *px;设置为flex-item CSS。

在这里：https://codepen.io/anon/pen/QVgKMV