Как сделать ровную сетку Flex-box?

Question

[driver458]

example
Мне нужно чтобы свободное место между элементами распределялось равномерно, но при этом нижний квадрат (или 2, 3) таких квадрата были ровно под верхними квадратами. Ваши предложения?

<main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </main>

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

div {
  background: red;
  margin: 20px auto;
  flex-basis: 200px;
  height: 200px;
  border: 1px solid black;
}

Answer 1

[dijavu]

<div class="grid">

    <div>Ячейка</div>
    <div>Ячейка</div>
    ...
    
    <!-- Повторить max число колонок вмещающихся по ширине экрана -->
    <div class="grid-clearfix"></div>
    <div class="grid-clearfix"></div>
    ....
    <div class="grid-clearfix"></div>

  </div>

.grid {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}

.grid > div {
  flex-grow: 1;
  flex-basis: 270px;
  box-sizing: border-box;
  padding: 5px;
}

.grid .grid-clearfix {
  opacity: 0;
  height: 0px;
  padding: 0;
  overflow: hidden;
}

В действии можно посмотреть тут

Answer 2

[driver458]

Solution
Source

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 100px;
  grid-gap: 15px;
  padding: 25px;
}

div {
  background: red;
  text-align: center;
  border: 1px solid black;
}

Comments

[Сергей delphinpro]

Это решение? =))

IE11/Edge решительно протестует! =)

[driver458]

Сергей, как раз тестил сегодня в этих браухерах
да там это не работает, хотя от EDGE ожидал большего

Answer 3

[Ankhena]

Если использовать space-between, то чтобы последний ряд был как flex-start, то добавляют пустые блоки. Столько сколько максимально влезает блоков в строку -1.

У меня для этого специальный класс сделан

.empty-flex {
  height: 0;
  border: 0; //опционально, для универсальности
  text-decoration: none;  //опционально, для универсальности
}

Answer 4

[Владимир]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

[driver458]

И? Там нет такого примера.

[Владимир]

driver458, justify-content: flex-start; не достаточно ?
Или нужен Хитрый space-between который превращается в flex-start на последнем ряду при этом выравниваясь по верхним элементам ?
Не встречал на флексах такого решения

[Владимир]

driver458, Если бы мен понадобилось, я бы считал количество рядов и дополнял прозрачными блоками чтобы нижний ряд был заполнен полностью

[driver458]

Владимир, но ведь неизвестно сколько блоков в ряду, зависит от размера экрана.

[Владимир]

driver458, Размер экрана известен, ширина блока тоже

[driver458]

Владимир, всё равно это не лучший способ

[Владимир]

driver458, Ок, подождем лучший

[Сергей Горячев]

driver458, Владимир, согласен с Владимир , 100 раз обсуждалось уже на тостере, это единственное решение (добавлять блоки).

[driver458]

Владимир, нашел решение с помощью GRID

Answer 5

[maxfox]

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

div {
  background: red;
  margin: 20px;
  flex-basis: 200px;
  height: 200px;
  border: 1px solid black;
}
main > div:last-child {
  margin-right: auto;
}

Comments

[driver458]

"Мне нужно чтобы свободное место между элементами распределялось равномерно", а тут флекс старт и бесполезный в данном случае маргин-райт авто, а в случае спэйс-битвин он схлопнется с соседом. На флексе в данный момент нельзя добиться нужного результата.