justify-content

Властивість CSS justify-content (вирівняти вміст) визначає те, як браузер розподіляє простір між та навколо елементами вмісту за головною віссю flex-контейнера, а також рядковою віссю сіткового контейнера.

Інтерактивний приклад нижче показує деякі значення за допомогою сіткової розкладки.

Спробуйте його в дії

Шикування виконується після того, як застосовані довжини та автоматичні зовнішні поля, тобто якщо при гнучкій розкладці є принаймні один гнучкий елемент, в котрого значення властивості flex-grow відмінне від 0 — воно не діятиме, оскільки не буде жодного вільного простору.

Синтаксис

/* Позиційне шикування */
justify-content: center; /* Скласти елементи навколо центру */
justify-content: start; /* Скласти елементи біля початку */
justify-content: end; /* Скласти елементи біля кінця */
justify-content: flex-start; /* Скласти гнучкі елементи біля початку */
justify-content: flex-end; /* Скласти гнучкі елементи біля кінця */
justify-content: left; /* Скласти елементи зліва */
justify-content: right; /* Скласти елементи зправа */

/* Шикування за базовою лінією */
/* justify-content не приймає значень за базовою лінією*/

/* Звичайне шикування */
justify-content: normal;

/* Розподілене шикування */
justify-content: space-between; /* Розподілити елементи рівномірно
                                   Перший елемент прямо на початку,
                                   а останній – прямо в кінці */
justify-content: space-around; /* Розподілити елементи рівномірно
                                  Пропуски на початку та в кінці
                                  завширшки як половина
                                  простору між елементами */
justify-content: space-evenly; /* Розподілити елементи рівномірно
                                  Проміжки на початку, між елементами
                                  та в кінці мають однаковий розмір */
justify-content: stretch; /* Розподілити елементи рівномірно
                             Розтягнути елементи з розміром 'auto'
                             для заповнення контейнера */

/* Шикування переповнення */
justify-content: safe center;
justify-content: unsafe center;

/* Глобальні значення */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

Значення

start

Елементи складені один за одним з початкового краю контейнера шикування на основній осі.

end

Елементи складені один за одним з кінцевого краю контейнера шикування на основній осі.

flex-start

Елементи складені один за одним на краю контейнера шикування, залежно від боку початку гнучкого контейнера. Це застосовується лише до елементів гнучкої розкладки. Для елементів, що не є дочірніми для гнучкого контейнера, це значення є еквівалентним до start.

flex-end

Елементи складені один за одним на краю контейнера шикування, залежно від боку кінця гнучкого контейнера. Це застосовується лише до елементів гнучкої розкладки. Для елементів, що не є дочірніми для гнучкого контейнера, це значення є еквівалентним до end.

center

Елементи складені один за одним біля центру контейнера шикування на основній осі.

left

Елементи складені один за одним з лівого краю контейнера шикування. Коли горизонтальна вісь властивості не паралельна до рядкової осі, наприклад, коли задано flex-direction: column;, то це значення еквівалентне до start.

right

Елементи складені один за одним з правого краю контейнера шикування на відповідній осі. Якщо вісь властивості не паралельна до рядкової осі (в сітковому контейнері) або рядковій осі (у флексбокс-контейнері), то це значення еквівалентне до start.

normal

Поводиться як stretch, окрім випадків багатоколонкових контейнерів з column-width зі значенням, відмінним від auto, – тоді колонки займають задану для них ширину column-width, а не розтягуються для заповнення контейнера. Оскільки stretch поводиться у гнучких контейнерах як start, то normal тоді також поводиться як start.

space-between

Елементи рівномірно розподілені в межах контейнера шикування вздовж головної осі. Проміжки між кожними двома сусідніми елементами – однакові. Перший елемент знаходиться прямо на початковому краю, а останній – прямо на кінцевому краю.

space-around

Елементи рівномірно розподілені в межах контейнера шикування вздовж головної осі. Проміжки між кожними двома сусідніми елементами – однакові. Незайнятий простір перед першим та після останнього елемента дорівнює половині простору між кожними двома сусідніми елементами.

space-evenly

Елементи рівномірно розподілені в межах контейнера шикування вздовж головної осі Простір між кожними двома елементами, а також між початковим краєм та першим елементом, як і між кінцевим краєм та останнім елементом, цілковито однаковий.

stretch

Якщо сума довжин елементів за головною віссю менша за довжину контейнера шикування, то будь-які елементи з автоматичною довжиною кожен отримують рівне (без дотримання пропорцій) збільшення довжини, втім, із дотриманням обмежень, накладених max-height та max-width (або еквівалентною функціональністю), тож сума довжин якраз заповнює контейнер шикування вздовж головної осі.

Примітка: Що до флексбоксів, то значення stretch поводиться як flex-start або start. Це пов'язано з тим, що у флексбоксах розтягування контролюється за допомогою властивості flex-grow.

safe

Якщо елемент переповнює контейнер шикування, то елемент шикується так, ніби режим шикування – start. Бажане шикування не буде реалізовано.

unsafe

Навіть якщо елемент переповнює контейнер шикування, бажане шикування все-таки реалізовується. На відміну від значення safe, котре ігнорує бажане шикування на користь запобігання переповненню.

Формальне визначення

Формальний синтаксис

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
де 
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

Приклади

Встановлення розподілу гнучких елементів

CSS

#container {
  display: flex;
  justify-content: space-between; /* Може бути змінене у живому зразку */
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>

const justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", (evt) => {
  document.getElementById("container").style.justifyContent = evt.target.value;
});

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Настанови із гнучких блоків CSS: Основні концепції гнучкого блока
• Настанови із гнучких блоків CSS: Шикування елементів у гнучкому контейнері
• Настанови із сітки CSS: Блокове шикування при сітковій розкладці CSS
• Блокове шикування CSS