Вирівнювання flex елементів

Для вирівнювання флекс елементів використовується спеціальна властивість justify-content. Вона набуває досить багато значень, які ми й вивчимо у цьому уроці.

Значення center

Значення center дозволяє вирівняти елементи по центру:

.parent {
	display: flex;
	justify-content: center;
}

Результат виконання коду:

Повторіть сторінку за цим зразком:

Значення space-between

Значення space-between дозволяє зробити так, щоб елементи рівномірно розподілилися за своїм батьком, а відстань між ними розрахувалося автоматично. При цьому перший елемент буде притиснутий до лівого краю, а останній - до правого.

Давайте подивимося на прикладі:

.parent	{
	display: flex;
	justify-content: space-between;
}

Результат виконання коду:

Повторіть сторінку за цим зразком:

Значення space-around

Значення space-around працює схожим чином, тільки робить так, щоб перший та останній елемент відступали від краю батька.

З першого погляду може здатися, що відстань між елементами та між крайніми елементами і батьком будуть рівні, однак це не так - відстань між елементами буде в 2 рази більше, ніж між батьком та крайнім елементом.

Подивимося на прикладі:

.parent {
	display: flex;
	justify-content: space-around;
}

Результат виконання коду:

Повторіть сторінку за цим зразком:

Значення space-evenly

Поведінка space-around найчастіше не така, яку вам хотілося б. Найчастіше нам потрібно зробити так, щоб усі зазначені вище проміжки були рівними.

Для цього придумано значення space-evenly, яке і зробить те, що нам потрібно:

.parent	{
	display: flex;
	justify-content: space-evenly;
}

Результат виконання коду:

Повторіть сторінку за цим зразком: