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

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

right

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

normal

Елементи складені на своїх усталених місцях так, ніби властивість justify-content не вказана. Це значення еквівалентне до stretch у сіткових та гнучких контейнерах.

baseline first baseline last baseline

Задає шикування елемента відносно першої або останньої базової лінії. Інакше кажучи, встановлює власну лінію вирівнювання першої чи останньої базової лінії блока так, щоб вона знаходилася на одному рівні з відповідною першою чи останньою спільною базовою лінією всіх блоків групи (у своїй окремій групі зі спільною базовою лінією). Запасний варіант шикування за first baseline – start, а для last baseline – end.

space-between

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

space-around

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

space-evenly

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

stretch

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

Зверніть увагу: stretch не підтримується гнучкими блоками (flexbox).

safe

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

unsafe

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

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

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

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="baseline">baseline</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</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;
});

Результат

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

              <br />
              <small>
                  # align-justify-content
                </small>
            </a>
          </td>
        </tr><tr>
          <td>
            <a href="https://w3c.github.io/csswg-drafts/css-flexbox/#justify-content-property">
              Unknown specification
              
              <br />
              <small>
                  # justify-content-property
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>