Flexbox и Grid
Утилиты для управления тем, как flex элементы переносятся.
| Class | Styles |
|---|---|
flex-nowrap | flex-wrap: nowrap; |
flex-wrap | flex-wrap: wrap; |
flex-wrap-reverse | flex-wrap: wrap-reverse; |
Используйте flex-nowrap для предотвращения переноса flex элементов, что может привести к переполнению контейнера негибкими элементами при необходимости:
<div class="flex flex-nowrap"> <div>01</div> <div>02</div> <div>03</div></div>Используйте flex-wrap для разрешения переноса flex элементов:
<div class="flex flex-wrap"> <div>01</div> <div>02</div> <div>03</div></div>Используйте flex-wrap-reverse для переноса flex элементов в обратном направлении:
<div class="flex flex-wrap-reverse"> <div>01</div> <div>02</div> <div>03</div></div>Префикс a flex-wrap утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="flex flex-wrap md:flex-wrap-reverse ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.