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