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>
Подробнее об использовании вариантов читайте в документации по вариантам.