Выравнивание элементов в последней строке flexbox

Я знаю, что этот вопрос задавали несколько раз здесь, но, к сожалению, ни одно из решений действительно не работает, и, возможно, есть лучший способ добиться того, что мне нужно в то же время.

Итак, учитывая следующий код, вы увидите, что первая строка соответствует 6 элементам, а вторая строка соответствует 2.

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
  width: 640px;
  height: 400px;
  justify-content: space-between;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
}
<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

Ответы

Ответ 1

Похоже, вы рассмотрели большинство, если не все, методов выравнивания последней строки, доступных в текущем flexbox.

Надеемся, что будущая итерация спецификации будет включать в себя свойства выравнивания, такие как last-row, last-column, only-child-in-a-row и т.д.

В то же время нам нужно взломать его с помощью перечисленных вами методов.

Также есть следующие варианты: (Второй вариант - это, в основном, FYI, поскольку большинство браузеров не завершили реализацию.)

  • Масонство Desandro

    Масонство - это библиотека компоновки сетки JavaScript. Это работает путем размещения элементов в оптимальном положении на основе доступных вертикальное пространство, вроде как каменщик, монтирующий камни в стене.

    source: http://masonry.desandro.com/

  • Модуль компоновки CSS-сетки Уровень 1

    Этот CSS-модуль определяет двумерную систему компоновки на основе сетки, оптимизированную для дизайна пользовательского интерфейса. В модели макета сетки дети контейнера сетки могут быть помещены в произвольные слоты в предопределенной гибкой или фиксированной сетке макета.

    source: https://drafts.csswg.org/css-grid/