1. Flexbox и Grid
  2. flex-direction

Flexbox и Grid

flex-direction

Утилиты для управления направлением flex элементов.

ClassStyles
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 элементов горизонтально в том же направлении, что и текст:

01
02
03
<div class="flex flex-row ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Строка в обратном порядке

Используйте flex-row-reverse для позиционирования flex элементов горизонтально в противоположном направлении:

01
02
03
<div class="flex flex-row-reverse ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Колонка

Используйте flex-col для позиционирования flex элементов вертикально:

01
02
03
<div class="flex flex-col ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Колонка в обратном порядке

Используйте flex-col-reverse для позиционирования flex элементов вертикально в противоположном направлении:

01
02
03
<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>

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков