Лекция из HTML Academy про свойство flex-wrap в CSS

Если флекс-элементов в контейнере станет больше чем он сможет вместить то произойдет следющее:

• Элементы будут сжиматься до самого возможного минимального значения

• Даже если указать явную величину ширины для элементов, механизм flexbox может их уменьшить

• Если элементы не умещаются в контейнер даже после уменьшения, они выйдут за его границы, но останутся в одном ряду.

Это поведение можно изменить с помощью свойства flex-wrap у флекс-контейнера.

По умолчанию оно установлено на nowrap, что запрещает перенос флекс-элементов на новую строку.

.flex_div {
  display: flex;
  flex-wrap: wrap;
}

Значение wrap разрешает перенос флекс-элементов на новую строку, если они не помещаются в контейнер.

Свойство flex-wrap: wrap-reverse

Если перенос флекс-элементов разрешен, ряды элементов располагаются вдоль поперечной оси: первый ряд начинается в начале поперечной оси, а последний — в конце. Однако это поведение актуально только для значения wrap.

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

.flex_div {
  display: flex;
  flex-wrap: wrap-reverse;
}