Flexbox: вырасти все элементы, но последняя строка

Ответ 1

Вы можете добавить псевдоэлемент ::after с огромным flex-grow, так что flex-grow: 1 элементов li будет пренебрежимо малым:

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

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

<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>

Ответ 2

Вы также можете добавить пустые элементы с помощью height: 0 в контейнер и заставить их заняться дополнительным пространством: http://codepen.io/anon/pen/OyOqrG p >

(Источник скопирован из моего кода:

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

Ответ 3

Вы можете удалить flex-grow: 1 на li и добавить justify-content: space-between на ul

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}
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>

Ответ 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;
 }

ДЕМО ЗДЕСЬ

Ответ 5

ОБНОВЛЕНИЕ: Оказывается, я не понял правильно, я неправильно задал вопрос, поскольку он нацелен только на последний элемент в списке, а не на последнюю строку. Тем не менее, мы оставим ниже здесь, в интересах любого, кто отправляется по этому вопросу в будущем и может оказаться полезным.

Если я правильно понимаю вас, чтобы достичь того, чего вы хотите, вам нужно установить свойство flex-grow на всех, кроме последнего элемента, который вы можете сделать, объединив отрицательный псевдокласс :not() с :last-child псевдокласс, например:

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>