Перенос нескольких блоков сразу (Flex)

150

24 марта 2019, 06:40

Имеется условный флексовый div, в нём 4 элемента. При уменьшении разрешения экрана, соответственно и уменьшении div'а, необходимо что бы сдвигались и элементы, которые находятся внутри div. Каким образом можно сделать без оборачивания элементов в дополнительные классы, так что бы онисмещались сразу по 2 штуки?

С формулировкой задачи у меня конечно всё весьма проблематично, но надеюсь что основной посыл будет понятен.

Answer 1

@media screen (max-width:576px){ //для экранов меньше 576px
   .flex-container {
       flex-wrap: wrap;
   }
}

Первоначальная идея flexbox — контейнер для установки его элементов в одну единственную строку. Свойство flex-wrap управляет тем, как flex-контейнер будет выкладывать свои элементы — в одну строку или в несколько, и направлением, в котором будут укладываться новые строки. Я бы советовал почитать документацию по flex прежде чем его использовать. :)