This page is being translated; the original is shown (Русский ).
Выравнивание содержимого по основной оси
Классы justify-* задают justify-content: куда флекс-контейнер сдвигает
элементы вдоль основной оси и как делит между ними свободное место. В сетке
они так же располагают колонки, если колонки уже контейнера. Берите их для
панелей с кнопками, шапок и навигации.
Пример
Значения
Три элемента во флекс-контейнере. Подпись над образцом — класс контейнера.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-3 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >justify-start</code >
<div class ="flex justify-start gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >justify-center</code >
<div class ="flex justify-center gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >justify-end</code >
<div class ="flex justify-end gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >justify-between</code >
<div class ="flex justify-between gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >justify-around</code >
<div class ="flex justify-around gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >justify-evenly</code >
<div class ="flex justify-evenly gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
</div >
Ширина экрана
С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину
окна просмотра: на узком экране элементы по центру, с ширины md — по краям.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-3 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >justify-center md:justify-between</code >
<div class ="flex justify-center md:justify-between gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="w-d8 text-center p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="w-d8 text-center p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
</div >
Классы
Класс
CSS
Значения
justify-startjustify-content: flex-start—
content-main-startjustify-content: flex-start—
justify-endjustify-content: flex-end—
content-main-endjustify-content: flex-end—
justify-centerjustify-content: center—
content-main-centerjustify-content: center—
justify-betweenjustify-content: space-between—
content-main-betweenjustify-content: space-between—
justify-aroundjustify-content: space-around—
content-main-aroundjustify-content: space-around—
justify-evenlyjustify-content: space-evenly—
content-main-evenlyjustify-content: space-evenly—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:justify-start.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать
justify-start, justify-center, justify-end — элементы вместе у начала,
в центре или у конца.justify-between — крайние элементы у краёв, остальное место поровну между
элементами.justify-around — у каждого элемента одинаковые поля с двух сторон, поэтому
у краёв место вдвое меньше, чем между элементами.justify-evenly — место поровну между элементами и у краёв.
Шапка: логотип слева, меню справа
HTML wrap_text Wrap source lines content_copy Copy
<header class ="flex justify-between items-cross-center" >
<a href ="/" >Логотип</a >
<nav >Меню</nav >
</header >
Основная ось следует направлению: при
flex-colitems-cross-*start-start … end-end
Второе имя
У каждого класса есть второе имя: content-main-start, content-main-center,
content-main-end, content-main-between, content-main-around,
content-main-evenly. Значения те же. В разметке пишите justify-*.
Ограничения
Классы распределяют только свободное место. Если элемент растягивается
(grow, flex-1), свободного места нет и класс ничего не меняет.
justify-start и justify-end следуют направлению письма: при dir="rtl"
начало строки справа.
См. также
Предыдущая Промежутки между элементами Следующая Выравнивание каждого элемента по основной оси внутри ячейки
