Justify html: Свойство justify-content | Справочник HTML CSS

Выключка по ширине, или Убей «text-align: justify;» / Хабр

Логически следующая статья будет посвящена использованию разнообразных пробелов и разделительных интервалов (такой заказ был в комментариях к статье о тире и дефисах пользователя besisland).

Итак, тезис статьи: «до тех пор, пока браузеры не имеют возможности динамически расставлять переносы в словах, вебмастеры должны забыть выключку по ширине как страшный сон».

Это значит, что нужно забыть CSS-конструкцию «text-align: justify;» и, если вы этого до сих пор не сделали, то выжечь калёным железом все воспоминания об «align="justify"».

Инь и ян типографики: ширина пробелов и правый край

Ровный правый край блока текста улучшает удобочитаемость на объёмах от половины стандартной страницы (при средней ширине строки), и только в случае однородности пробелов.

Таким образом, равномерность ширины пробелов на обычно коротких текстах в Интернете является гораздо более важной, чем выравнивание правого края.

На протяжении исторического развития публикации книг (от рукописей до компьютерных текстовых процессоров) внешний вид полосы текста зависел от двух параметров:

• подвижность литер, то есть, наличие обратной связи: можно ли исправлять уже написанный/набранный текст;
• возможность переноса части слова на новую строку, в ручном режиме либо автоматически.

Рукописи и ксилография

При наличии равномерных пробелов (а для старых рукописей — при полном их отсутствии) обычно виден рваный правый край (хотя, кое-где он — почти ровный, в зависимости от почерка писца).

Типографская печать (ручной набор, монотипы, линотипы)

Одновременная равномерность пробелов и правого края стала достижима с самого начала книгопечатания, чем значительно улучшила читаемость книг.

Печатная машинка

При одинаковых пробелах имеем рваный правый край. Однако, при подготовке «самиздатовских» книг на печатной машинке многие пытались выравнивать правый край засчёт удвоения межсловных пробелов (множество примеров см. в библиотеке Мошкова). На мой взгляд, выглядит не ахти, особенно если учесть, что избавиться от «дорожек» и «лесенок» из пробелов внутри абзаца при такой вёрстке достаточно сложно.

Современные текстовые процессоры

Без переносов текст ужасен.

Браузеры

До тех пор, пока этого не произошло, в плане типографики браузер недалеко ушёл от печатной машинки. Осознавая как этот факт, так и тот факт, что в недалёком будущем технологии разовьются до нормальной обработки переносов, дизайнер должен временно отказаться от CSS-конструкции «text-align: justify;». Надеюсь, что от кода вида «p align="justify"» вы уже давно отказались, потому что он является не рекомендуемым (deprecated) в HTML 4.01 и может в следующих версиях стандарта перейти в разряд «устаревшего» (obsolete).

И последний, самый сильный аргумент

text-justify — Веб-технологии для разработчиков

CSS-свойство text-justify определяет какой тип выравнивания следует применить к тексту,  когда text-align: justify;

text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* Устаревшее значение */

Синтаксис

Свойство text-justify указывается как одно ключевое слово, выбранное из нижеследующего списка значений.

Значения

none

Выравнивание текста отключено. Оно имеет такой же эффект как отсутствие применение свойства text-align, хотя оно полезно, если вам нужно включать и выключать выравнивание.

auto

Браузер выбирает лучший тип выравнивания в текущей ситуации, основываясь на балансе между производительностью и качеством, а также на том, что более подходит для языка текста (например, английского, иероглифных языков, и т.п.).  Оно используется по умолчанию, если text-justify не установлен.

inter-word

Выравнивание текста по средствам добавления пробелов между словами (эффективно варьируя word-spacing), что наиболее подходит для языков, которые используют разделение слов пробелами, таких как английский или корейский.

inter-character

Выравнивание текста по средствам добавления пробелов между символами (effectively varying letter-spacing), что наиболее подходит для таких языков как японский.

distribute

Показывает тоже поведение, что и inter-character; это значение сохранилось для обратной совместимости.

Формальный синтаксис

auto | inter-character | inter-word | none

Примеры

<p><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p><code>text-justify: distribute</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>

p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}

Спецификации

Поддержка браузерами

Легенда

Полная поддержка  

Полная поддержка

Нет поддержки  

Нет поддержки

Смотрите замечания реализации.

Смотрите замечания реализации.

Пользователь должен сам включить эту возможность.

Пользователь должен сам включить эту возможность.

Смотрите также

justify-content — Веб-технологии для разработчиков

HTML5 | Выравнивание элементов. justify-content

Выравнивание элементов. justify-content

Последнее обновление: 18.04.2017

Иногда мы можем сталкиваться с тем, что пространство flex-контейнеров по размеру отличается от пространства, необходимого для flex-элементов. Например:

• flex-элементы не используют все пространство flex-контейнера

• flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за пределы контейнера.

Для управления этими ситуациями мы можем применять свойство justify-content. Оно выравнивает элементы вдоль основной оси — main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца — по вертикали) и принимает следующие значения:

• flex-start: значение по умолчанию, при котором первый элемент выравнивается по левому краю контейнера(при расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так далее.

• flex-end: последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далее

• center: элементы выравниваются по центру

• space-between: если в стоке только один элемент или элементы выходят за границы flex-контейнера, то данное значение аналогично flex-start. В остальных случаях первый элемент выравнивается по левому краю (при расположении в виде строки) или по верху (при расположении в виде столбца), а последний элемент — по правому краю контейнера (при расположении в виде строки) или по низу (при расположении в виде столбца). Все оставшееся пространство между ними равным образом распределяется между остальными элементами

• space-around: если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению center. В ином случае элементы равным образом распределяют пространство между левым и правым краем контейнера, а расстояние между первым и последним элементом и границами контейнера составляет половину расстояния между элементами.

Выравнивание для расположения элементов в виде строки:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			
			.flex-container {
				display: flex;
				border:1px #ccc solid;
			}
			.flex-end{
				justify-content: flex-end;
			}
			.center{
				justify-content: center;
			}
			.space-between{
				justify-content: space-between;
			}
			.space-around{
				justify-content: space-around;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.5em;
				color: white;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
			.color4 {background-color: #2A9FBC;}
			.color5 {background-color: #F15B2A;}
        </style>
    </head>
    <body>
		<h4>Flex-end</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Center</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Space-between</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Space-around</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
	</body>
</html>

Выравнивание при расположении в виде столбцов:

Свойство justify-content — выравнивание по главной оси

Свойство justify-content задает выравнивание элементов вдоль главной оси. Применяется к родительскому элементу для flex блоков.

Синтаксис

селектор { justify-content: flex-start | flex-end | center | space-between | space-around; }

Значения

Значение по умолчанию: flex-start.

Пример . Значение flex-start

Сейчас ось направлена слева направо (это делает flex-direction: row), а блоки прижаты к левой стороне:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> #parent { display: flex; justify-content: flex-start; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение flex-end

В данном примере ось также направлена слева направо, но блоки прижаты к правой стороне, так как задано justify-content в значении flex-end:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> #parent { display: flex; justify-content: flex-end; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение center

Сейчас блоки будут стоять по центру независимо от направления главной оси:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> #parent { display: flex; justify-content: center; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение space-between

Блоки распределены вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> #parent { display: flex; justify-content: space-between; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение space-around

Блоки распределены вдоль главной оси, при этом между первым блоком и началом оси, последним блоком и концом оси такой же промежуток, как и между остальными блоками. Однако, промежутки суммируются и между двумя блоками расстояние в два раза больше, чем между блоком и началом/концом оси:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> #parent { display: flex; justify-content: space-around; flex-direction: row; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение center. Ось вниз

Сменим направление главной оси, задав flex-direction: column:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> #parent { display: flex; justify-content: center; flex-direction: column; height: 400px; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение space-between. Ось вниз

Сейчас блоки распределятся равномерно по вертикали:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> #parent { display: flex; justify-content: space-between; flex-direction: column; height: 400px; border: 1px solid #696989; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Смотрите также

• свойство flex-direction,
  которое задает направление осей flex блоков
• свойство justify-content,
  которое задает выравнивание по главной оси
• свойство align-items,
  которое задает выравнивание по поперечной оси
• свойство flex-wrap,
  которое многострочность flex блоков
• свойство flex-flow,
  сокращение для flex-direction и flex-wrap
• свойство order,
  которое задает порядок flex блоков
• свойство align-self,
  которое задает выравнивание одного блока
• свойство flex-basis,
  которое задает размер конкретного flex блока
• свойство flex-grow,
  которое задает жадность flex блоков
• свойство flex-shrink,
  которое задает сжимаемость flex блоков
• свойство flex,
  сокращение для flex-grow, flex-shrink и flex-basis

Атрибут justify-items — Веб-технологии для разработчиков

Атрибут CSS justify-items определяет атрибут по умолчанию justify-self для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, создайте копию https://github.com/mdn/interactive-examples и отправьте нам запрос на включение изменений.

Эффект этого атрибута зависит от выбранного способа разметки:

• Используя разметку с помощью блоков (block-level layout), элементы выравниваются внутри содержащего их блока по внутренней оси.
• Для абсолютно позиционированых элементов выравнивание происходит внутри содержащего их блока по внутренней оси, учитывая значения смещения сверху, слева, снизу и справа.
• Используя разметку с помощью ячеек таблицы (table cell layout), этот атрибут игнорируется (подробнее о выравнивании в блочной структуре, абсолютном позиционировании и о табличной разметке).
• Используя разметку с помощью гибких или адаптивных блоков (flexbox layout), этот атрибут игнорируется (подробнее о выравнивании в разметке flexbox).
• Используя разметку с помощью сетки (grid layout), элементы выравниваются внутри их сеточной области по внутренней оси (подробнее о выравнивании в разметке grid).

Синтаксис

/* Основные ключевые слова */
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/* Выравнивание положения */
justify-items: center;     /* Выровнять элементы по центру */
justify-items: start;      /* Выровнять элементы в начале */
justify-items: end;        /* Выровнять элементы в конце */
justify-items: flex-start; /* Эквивалентно 'start'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
justify-items: flex-end;   /* Эквивалентно 'end'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
justify-items: self-start;
justify-items: self-end;
justify-items: left;       /* Выровнять элементы по левому краю */
justify-items: right;      /* Выровнять элементы по правому краю */

/* Исходное выравнивание */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/* Выравнивание при переполнении (только для выравнивания положения) */
justify-items: safe center;
justify-items: unsafe center;

/* Унаследованное выравнивание */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

/* Глобальные значения */
justify-items: inherit;
justify-items: initial;
justify-items: unset;

Этот атрибут может принимать одну из четырех различных форм:

• Основные ключевые слова: одно из значений ключевого слова: normal, auto, или stretch.
• Исходное выравнивание: ключевое слово baseline  плюс одно ключевое слово по выбору: first или last.
• Выравнивание положения: одно из ключевых слов: center, start, end, flex-start, flex-end, self-start, self-end, left, или right. Плюс ключевое слово по выбору: safe или unsafe.
• Унаследованное выравнивание: ключевое слово legacy, за которым следует ключевое слово left или right.

Значения

auto

Используемое значение является значением атрибута justify-items родительского блока. Если у блока нет родительского элемента или он абсолютно спозиционирован, то в этих случаях значение auto представляет собой значение normal.

normal

Эффект этого атрибута зависит от выбранного способа разметки:

• Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова start
• Для разметки с абсолютно позиционнированными элементами, это ключевое слово ведет себя как start на замененных блоках с абсолютным позиционированием и как stretch на всех остальных блоках с абсолютным позиционированием
• Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
• Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
• Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению stretch, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как start

start

Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.

end

Элемент выравнивается на одном уровне друг с другом по направлению к конечной границе  контейнера выравнивания по соответствующей оси.

flex-start

Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как start.

flex-end

Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как end.

self-start

Элемент выравнивается на одном уровне с границей контейнера выравнивания начальной стороны элемента по соответствующей оси.

self-end

Элемент выравнивается на одном уровне с границей контейнера выравнивания конечной стороны элемента по соответствующей оси.

center

Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.

left

Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.

right

Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.

baseline
first baseline
last baseline

Определяет участие значений first baseline или last baseline в исходном выравнивании. Значение baseline выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.

Возвратным выравниванием для first baseline является значение start, для last baseline является значение end.

stretch

Если объединенный размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением auto увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые max-height/max-width (или эквивалентной функциональностью), таким образом, что объединенный размер точно заполняет контейнер выравнивания.

safe

Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение start.

unsafe

Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.

legacy

Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение justify-self: auto, ключевое слово legacy не учитывается по нисходящему наследованию. Действует только со значением left, right, или center, связанным с ним.

Формальный синтаксис

normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]
где 
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

Спецификации

Поддержка браузерами

justify-content: flex-start|flex-end|center|space-between|space-around;

 / * Значения ключевых слов * /
выравнивание текста: слева;
выравнивание текста: вправо;
выравнивание текста: центр;
выравнивание текста: выравнивание;
выравнивание текста: выравнивание-все;
выравнивание текста: начало;
выравнивание текста: конец;
выравнивание текста: соответствие родительского;

/ * Выравнивание столбца таблицы по символам * /
выравнивание текста: ".";
выравнивание текста: "." центр;

/ * Значения выравнивания блока (нестандартный синтаксис) * /
выравнивание текста: -moz-center;
выравнивание текста: -webkit-center;

/ * Глобальные значения * /
выравнивание текста: наследование;
выравнивание текста: начальное;
выравнивание текста: отключено;
 

 начало | конец | слева | право | центр | оправдать | соответствие-родитель 

 

  Целочисленный элемент массы в пустом месте varius.Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
 

 .example {
  выравнивание текста: слева;
  граница: сплошная;
} 

 

  Целочисленный элемент массы в пустом месте varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
 

 .example {
  выравнивание текста: центр;
  граница: сплошная;
} 

 

  Целочисленный элемент массы в пустом месте varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
 

.пример {
  выравнивание текста: выравнивание;
  граница: сплошная;
} 

 .something {
  маржа: авто;
}
 

 .something {
  маржа: 0 авто;
}
 

 .something {
  маржа слева: авто;
  маржа-право: авто;
}