CSS від А до Я: вирівнювання тексту по ширині і робота з Flexbox

36

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких порад щодо того, як вирівняти текст по ширині.

J значить justify

Про вирівнювання тексту по ширині особливо сказати нічого, тому ми відхилимося від теми і поговоримо про вирівнювання вмісту за допомогою flexbox.

Ми вже обговорили властивість text-align, і як з його допомогою вирівнювати текст на сторінці по ширині в цьому відеоуроці на букву J. Тут сказати майже нічого, тому давайте краще поговоримо про flexbox!

У flexbox є властивість justify-content, з допомогою якого можна позиціонувати елементи всередині флекс-контейнера.
Значення цієї властивості визначають, як браузер буде розподіляти простір між цими елементами по головній осі загального контейнера. У властивості justify-content є 5 значень:

flex-start (за замовчуванням) — елементи розташовуються від лівої межі контейнера;

flex-end – елементи розташовуються від правої межі контейнера;

center – елементи розташовані по центру всередині контейнера;

space between – всі елементи розтягнуті на всю ширину контейнера так, що перший елемент притиснутий до лівої кордоні, а останній – до правої межі контейнера;

space-around – елементи, розташовані на однакових відстанях один від одного, враховуючи відстані від лівого і правого країв контейнера.

Подивіться на демо нижче, щоб зрозуміти різницю значень властивості justify-content.