Press shift question mark to access a list of keyboard shortcuts
Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Justify — это одно доступное значение для свойства text-align .
Это позволяет форматировать текст в стиле, часто используемом в оформлении газет.
В этом эпизоде мы рассмотрим 12 возможных значений для text-align , одно из которых является justify . Далее мы рассмотрим использование выровненного текста со столбцами CSS и, наконец, рассмотрим, как вы можете использовать justify для создания плавной адаптивной грид-системы с помощью всего нескольких строк кода.
Выровнять текст
Свойство text-align выполняет очень знакомое действие выравнивания текста. Любой, кто читал слова на странице или использовал текстовый процессор, знаком с идеей выравнивания текста по левому, центральному или правому краю.
Это 3 наиболее распространенных значения, используемых с text-align но есть и другие.
-
left -
right -
center -
justify -
start -
end -
start end -
match-parent -
<string> -
start <string> -
<string> end -
inherit
start и end ключевые слова аналогичны left и right но учитывают направление текста. Если язык слева направо, start и left эквивалентны. Если направление текста rtl тогда start и right эквивалентны.
Соответствие match-parent значения аналогично inherit но start и end рассчитываются в соответствии с указанием родителя. Это значение плохо поддерживает браузер, но работает в Chrome.
Значения <string> позволяют определить выравнивание по произвольной строке текста. Это значение в настоящее время не поддерживается ни в одном браузере, поэтому я не смог его протестировать. Пример для MDN звучит довольно полезно, хотя для выравнивания десятичных значений по полной строке «.».
CSS-столбцы
Оставляя позади это болото совместимости браузера и некоторые довольно нишевые способы использования text-align , давайте рассмотрим нечто более наглядное, когда text-align: justify становится очень полезным.
Иногда дизайну выгодно разбивать большие блоки текста на несколько столбцов. Раньше это было царством довольно сложного Javascript, но теперь это можно сделать просто в CSS, используя свойство column-count . Это свойство поддерживается во всех современных браузерах, но требует префиксов во всем, кроме IE.
.box { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
Встроенный контент автоматически переформатируется при изменении доступного пространства. Довольно мило.
Чтобы усилить визуальный эффект от столбцов и больше походить на газетную статью, мы можем использовать text-align: justify .
Сетки
Мы видели, как мы можем манипулировать выравниванием текста, чтобы оправдать копирование и создавать аккуратно определенные столбцы. Также возможно использовать justify для создания плавной, гибкой системы сетки без поплавков, без исправлений и без драм. Для получения дополнительной информации о float и решениях некоторых из его болевых точек, посмотрите «Эпизод 6: Поплавок» .
Выровненный текст выравнивает его левый и правый края по левому и правому краям его контейнера блока. Мы можем создать ряд элементов inline-block и расположить их в сетке, выровняв содержимое их контейнерного элемента. Я читал об этой технике в статье, опубликованной Патриком Кункой в марте 2013 года, и это довольно удивительно.
Я создам неупорядоченный список с классом «grid-container» с шестью элементами списка, которые будут действовать как «grid-элементы».
Я добавлю ширину, цвет фона и некоторые отступы к элементам списка, чтобы немного их разнести. Я также установлю их для display: inline-block который требуется для их обоснования. Чтобы удалить интервал, введенный inline-block , я установлю нулевой font-size контейнера сетки, а font-size элементов сетки — 1rem .
Теперь мы устанавливаем text-align: justify на контейнере сетки, но прежде чем элементы сетки будут равномерно распределены, нам нужно создать «скрытый» элемент полной ширины, который будет определять пространство, в котором нужно разложить элементы.
Используя псевдоэлемент :after , немного похожий на подход, используемый в clearfix, мы можем сделать так, чтобы ширина контейнера сетки была такой же широкой, как и у его родителя. Теперь элементы сетки правильно располагаются и переформатируются по мере изменения размера окна браузера.
* { -moz-box-sizing: border-box; box-sizing: border-box; } ul { margin: 0; padding: 0; text-align: justify; font-size: 0; } ul:after { content: ""; display: inline-block; width: 100%; } li { display: inline-block; width: 50%; margin: 0 0 1em; padding: 1em; background: #eee; font-size: 1rem; text-align: left; }
Изменение ширины элементов списка позволяет легко создавать различное количество столбцов, не выполняя большого количества вычислений для полей и ширины желоба. Я думаю, что это фантастически простая и элегантная техника, которая может пригодиться для будущего проекта.
Следите за нашей статьей Quick Tip в ближайшее время!