1. Flexbox и Grid
  2. flex-wrap

Flexbox и Grid

flex-wrap

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

ClassStyles
flex-nowrap
flex-wrap: nowrap;
flex-wrap
flex-wrap: wrap;
flex-wrap-reverse
flex-wrap: wrap-reverse;

Примеры

Без переноса

Используйте flex-nowrap для предотвращения переноса flex элементов, что может привести к переполнению контейнера негибкими элементами при необходимости:

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

Обычный перенос

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

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

Обратный перенос

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

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

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

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