CSS от А до Я: выравнивание текста по ширине и работа с Flexbox

CSS от А до Я: выравнивание текста по ширине и работа с Flexbox

От автора: приветствую вас в нашей серии уроков 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.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree