1. Flexbox и Grid
  2. place-self

Flexbox и Grid

place-self

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

ClassStyles
place-self-auto
place-self: auto;
place-self-start
place-self: start;
place-self-end
place-self: end;
place-self-end-safe
place-self: safe end;
place-self-center
place-self: center;
place-self-center-safe
place-self: safe center;
place-self-stretch
place-self: stretch;

Примеры

Авто

Используйте place-self-auto для выравнивания элемента на основе значения свойства place-items контейнера:

01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ...">  <div>01</div>  <div class="place-self-auto ...">02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

Начало

Используйте place-self-start для выравнивания элемента в начале на обеих осях:

01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ...">  <div>01</div>  <div class="place-self-start ...">02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

Центр

Используйте place-self-center для выравнивания элемента в центре на обеих осях:

01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ...">  <div>01</div>  <div class="place-self-center ...">02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

Конец

Используйте place-self-end для выравнивания элемента в конце на обеих осях:

01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ...">  <div>01</div>  <div class="place-self-end ...">02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

Растягивание

Используйте place-self-stretch для растягивания элемента на обеих осях:

01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ...">  <div>01</div>  <div class="place-self-stretch ...">02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

Адаптивный дизайн

Префикс a place-self утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="place-self-start md:place-self-end ...">  <!-- ... --></div>

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

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