Как сделать перенос блоков?

Question

[fruneen]

Всем привет! Нужно сделать так, чтобы когда блоков, больше чем 3, то 4 переносился на новую строку, но если блоков на одной строке 2, то они должны идти последовательно а не по разным сторонам

Answer 1

[Рома Зварич]

Если Вы используете код ответа к этому вопросу, то для родителя нужно поменять свойство justify-content: space-between; на justify-content: flex-start;

Результат:
https://codepen.io/hisbvdis/pen/aeRaGN

Comments

[fruneen]

Спасибо, а как при добавлении блока в html автоматически на нем появлялась анимация?

[Рома Зварич]

fruneen, в коде выставлено, что для всех блоков с этим классом применять анимацию.
А вот задержку анимации нужно подстраивать

[fruneen]

Ясно, спасибо за помощь

[Brad9aga]

фишка с анимацией мне понравилась

Answer 2

[Dima Polos]

Сетка.

Answer 3

[Oleg]

А вы как верстаете? если это float то хз. Но я бы сделал так, создал родительский контейнер значение display: flex, и он автоматом сделает то что вам нужно, вообщем прочитайте о flex.

Comments

[Dima Polos]

Если флоат, то особо ничего особенного, также, само перенесется) Одним флексом не решить.

[Oleg]

Dima Polos, ну я давно не верстал, но помой-му проблема floаt в том что если блоки разной высоты, то получается боль... при флексах все встает нормально вне зависимости от высоты самих блоков. И помой-му flex-сом тут как раз таки и решается, просто проще и эффективнее чем на float...

[fruneen]

Ещё не начинал верстать, все блоки будут одинаковые по размерам

[Dima Polos]

Oleg, да, если разной высоты флоат это боль, но, это тоже решается, я ЗА флексы. Суть в том, что даже на флексах все равно отступ между блоками просто так не сделать, надо уметь работать с сеткой.