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