Від автора: вітаю вас в нашій серії уроків 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.
