将最后一项分到下一行时，弹性项目的大小相等[重复]

Question

我希望我的弹性项目在不设置宽度的情况下具有相同的大小。
我知道可以通过将弹性项目设置为 flex: 1; 来完成。
但是，我也想打破最后一个项目进入下一行但保持其宽度等于其他项目，现在我被卡住了。

我该怎么做？

ul{
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex; 
  flex-flow: row wrap;
}
li{
  flex: 1;
  border: solid 1px;
  text-align: center;
  flex-basis: calc(100% / 7);
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li class="keep-next-line">7</li> <!--Kepp this next line, but size should be equal to other item-->
</ul>

Answer 1

您应该设置flex-grow:0 并且应该是calc(100% / 6) 而不是calc(100% / 7)。我还添加了box-sizing:border-box; 用于将边框包含在宽度中。

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
}

li {
  flex: 1;
  border: solid 1px;
  text-align: center;
  flex-basis: calc(100% / 6);
  box-sizing: border-box;
}

.keep-next-line {
  flex-grow: 0;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li class="keep-next-line">7</li>
  <!--Kepp this next line, but size should be equal to other item-->
</ul>