Flexbox：增长所有项目但最后一行

Question

我目前有这个简单的Flexbox布局：

＆＃13;

＆＃13;

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
li {
  flex-grow: 1;
  padding: 20px;
  margin: 10px;
  background: #ddd;
}

＆＃13;

<ul>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipisicing</li>
    <li>elit</li>
    <li>sed</li>
    <li>do</li>
    <li>eiusmod</li>
    <li>tempor</li>
    <li>incididunt</li>
    <li>ut</li>
    <li>labore</li>
    <li>et</li>
    <li>dolore</li>
    <li>magna</li>
    <li>aliqua</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我希望我的元素填充容器宽度（如现在），但保持最后一行左对齐。正如您所看到的，最后一行尝试填充空间，这有时会使最后一行元素变得难看。

Flexbox是否允许我们这样做？我无法找到办法。

Answer 1

您可以使用巨大的::after添加flex-grow伪元素，以便flex-grow: 1元素的li可以忽略不计：

ul::after {
  content: '';
  flex-grow: 1000000000;
}

＆＃13;

＆＃13;

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
li {
  flex-grow: 1;
  padding: 20px;
  margin: 10px;
  background: #ddd;
}
ul::after {
  content: '';
  flex-grow: 1000000000;
}

＆＃13;

<ul>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>consectetur</li>
  <li>adipisicing</li>
  <li>elit</li>
  <li>sed</li>
  <li>do</li>
  <li>eiusmod</li>
  <li>tempor</li>
  <li>incididunt</li>
  <li>ut</li>
  <li>labore</li>
  <li>et</li>
  <li>dolore</li>
  <li>magna</li>
  <li>dolore</li>
  <li>magna</li>
  <li>aliqua</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您还可以将包含height: 0的空项添加到容器中，并让它们占用额外空间：http://codepen.io/anon/pen/OyOqrG

（从我的codepen中复制的来源：

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  ...
  <p class="empty"></p>
  <p class="empty"></p>
</div>



.container {
  max-width: 490px;
  display: flex;
  flex-flow: row wrap;
  background-color: #00f;
}

.container p {
  min-width: 90px;
  margin: 5px;
  background-color: #f00;
  height: 90px;
  flex-grow: 1;
}

.container p.empty {
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
}

Answer 3

您可以删除li上的flex-grow: 1并在ul

上添加justify-content: space-between

＆＃13;

＆＃13;

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}
li {
  padding: 20px;
  margin: 10px;
  background: #ddd;
}

＆＃13;

<ul>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipisicing</li>
    <li>elit</li>
    <li>sed</li>
    <li>do</li>
    <li>eiusmod</li>
    <li>tempor</li>
    <li>incididunt</li>
    <li>ut</li>
    <li>labore</li>
    <li>et</li>
    <li>dolore</li>
    <li>magna</li>
    <li>aliqua</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以设置伪::last-child。除了最后一个

之外，所有<li>都会增长

<强> CSS

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
li {
  flex-grow: 1;
  padding: 20px;
  margin: 10px;
  background: #ddd;
}

li:last-child {
  flex-grow: 0;
 }

<强> DEMO HERE

Answer 5

更新：原来我理解不正确，我误解了这个问题，因为我们只想查找列表中的最后一个项，而不是最后一个 >行的。但是，为了将来绊倒这个问题并且可能会觉得有帮助的任何人的利益，请留下这里。

如果我正确理解你，为了达到你想要的效果，你需要在所有上设置flex-grow属性，但可以通过组合来设置最后一项带negation pseudo class :not()的:last-child pseudo class，如下所示：

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
li:not(:last-child) {
  flex-grow: 1;
}
li {
  padding: 20px;
  margin: 10px;
  background: #ddd;
}

<ul>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipisicing</li>
    <li>elit</li>
    <li>sed</li>
    <li>do</li>
    <li>eiusmod</li>
    <li>tempor</li>
    <li>incididunt</li>
    <li>ut</li>
    <li>labore</li>
    <li>et</li>
    <li>dolore</li>
    <li>magna</li>
    <li>aliqua</li>
</ul>