Как расположить последние 2 элемента flex слева?

Question

[myskypesla]

Пример кода тут https://jsfiddle.net/auh47enj/.

Подскажите решение именно на flex'ах.

P.S. Решение с добавлением пустых элементов не предлагайте.

Answer 1

[Mikhail Osher]

Вы делаете обычный grid. Вопрос с отступами между элементами уже давно решен, не надо изобретать велосипеды.
blog.codeply.com/2016/04/06/how-the-bootstrap-grid...

TL;DR:

Выбираете размер отступа, например $spacer: 30px.
Даете row отрицательный margin left/right в половину этой величины.
Даете col положительный padding left/right в половину этой величины.

// EDIT
Вот пример.

<div class="row">
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
  <div class="col">content</div>
  <!-- хоть миллион вставьте их -->
</div>

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.col {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 30px;
}

Comments

[myskypesla]

А если у меня из базы на front прилетает 100+ элементов и нужно сформировать такую структура? Можно конечно js'ом создать колонки и т.д., но в высоконагруженном приложении, добавление колонок в дом, будет затратно каждый раз делать

[alvvi]

myskypesla: никто и не предлагал вам через js делать, вам предложили использовать сетку (бутстрап/написать самому, etc.)

Answer 2

[Артём Ведищев]

А может так?
https://jsfiddle.net/auh47enj/3/