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

Содержание

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

Надеюсь этой записью открыть серию статей, посвящённых типографике в целом и веб-типографике в частности.

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

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

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

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


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

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

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

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

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

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


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

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

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


Есть и подвижность литер (поподробнее о разгонке мы поговорим в будущей статье о пробелах), и возможность переноса в «ручном» режиме.

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

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


Снова нет подвижности литер, но переносы можно расставлять вручную.

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

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


Пытаются автоматически имитировать типографский процесс. Есть подвижность литер и возможность как автоматической расстановки переносов, так и ручной. Как ни удивительно, но даже в MS Word можно добиться приличного вида блока текста, выключенного по ширине, если в тексте расставить переносы.

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

Браузеры


Первый в истории тип носителя, имеющий подвижность литер, но не имеющий возможности расстановки переносов. Помимо этого, строка может иметь практически любую ширину (ведь хорошие дизайнеры предусматривают возможное изменение размера шрифта пользователем!).Теперь, чтобы совместить равномерность пробелов и выравнивание по ширине, браузеры практически должны стать интерактивными текстовыми процессорами: либо автоматически расставляя переносы в реальном времени на произвольных объёмах текста, либо адекватно обрабатывая «мягкие переносы»
­
так же в реальном времени.

До тех пор, пока этого не произошло, в плане типографики браузер недалеко ушёл от печатной машинки. Осознавая как этот факт, так и тот факт, что в недалёком будущем технологии разовьются до нормальной обработки переносов, дизайнер должен временно отказаться от 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;
}

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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
text-justifyChrome Полная поддержка 32Замечания Отключено
Полная поддержка 32Замечания
Отключено
Замечания inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
Отключено From version 32: this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 12
Полная поддержка 12
Замечания Standard values inter-character and none are supported. The deprecated distribute value is also supported.
Firefox Полная поддержка 55
Полная поддержка
55
Полная поддержка 54
Отключено From version 54: this feature is behind the layout.css.text-justify.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 11
Полная поддержка 11
Замечания Standard values inter-character and none are supported. The deprecated distribute value is also supported.
Opera Полная поддержка 19Замечания Отключено
Полная поддержка
19Замечания Отключено
Замечания inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
Отключено From version 19: this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
Safari Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 9945.
WebView Android Нет поддержки НетChrome Android Полная поддержка
32Замечания Отключено
Полная поддержка 32Замечания Отключено
Замечания inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
Отключено From version 32: this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 55
Полная поддержка 55
Полная поддержка 54
Отключено From version 54: this feature is behind the layout.css.text-justify.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 19Замечания Отключено
Полная поддержка 19Замечания Отключено
Замечания inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
Отключено From version 19: this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
Safari iOS Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 9945.
Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

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

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

Supported in Flex LayoutChrome Полная поддержка 52
Полная поддержка 52
Частичная поддержка 29
Замечания Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Полная поддержка 21
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 20
Полная поддержка 20
Замечания Before Firefox 27, Firefox supported only single-line flexbox.
Нет поддержки 18 — 20
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 49
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 48С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 11Opera Полная поддержка 12.1Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 6.1
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 52
Полная поддержка 52
Частичная поддержка 4.4
Замечания Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Полная поддержка ≤37
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 52
Полная поддержка 52
Частичная поддержка 29
Замечания Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Полная поддержка 25
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 20
Полная поддержка 20
Замечания Before Firefox 27, Firefox supported only single-line flexbox.
Нет поддержки 18 — 20
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 49
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 48С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 12.1Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 6.1
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 6.0
Полная поддержка 6.0
Частичная поддержка 2.0
Замечания Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Полная поддержка 1.5
С префиксом Требует вендорный префикс: -webkit-
baselineChrome Полная поддержка 57Edge Полная поддержка 79Firefox Нет поддержки 45 — 60
Нет поддержки 45 — 60
Замечания justify-content no longer accepts baseline values
IE Нет поддержки НетOpera Полная поддержка 44Safari Нет поддержки НетWebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Нет поддержки 45 — 60
Нет поддержки 45 — 60
Замечания justify-content no longer accepts baseline values
Opera Android Полная поддержка 43Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0
first baseline and last baselineChrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки 52 — 60
Нет поддержки 52 — 60
Замечания justify-content no longer accepts baseline values
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки 52 — 60
Нет поддержки 52 — 60
Замечания justify-content no longer accepts baseline values
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
left and rightChrome Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Edge Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Firefox Полная поддержка 52IE Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Opera Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Safari Полная поддержка 9WebView Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Chrome Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Firefox Android Полная поддержка 52Opera Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Safari iOS Полная поддержка 9Samsung Internet Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
safe and unsafeChrome Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Edge Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Firefox Полная поддержка 63IE Нет поддержки НетOpera Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Safari Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
WebView Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Chrome Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Firefox Android Полная поддержка 63Opera Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Safari iOS Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Samsung Internet Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
space-evenlyChrome Полная поддержка 60Edge Полная поддержка 79Firefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 47Safari Полная поддержка 11WebView Android Полная поддержка 60Chrome Android Полная поддержка 60Firefox Android Полная поддержка 52Opera Android Полная поддержка 44Safari iOS Полная поддержка 11Samsung Internet Android Полная поддержка 8.0
start and endChrome Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Edge Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Firefox Полная поддержка 45IE Нет поддержки НетOpera Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Safari Полная поддержка 9WebView Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Chrome Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Firefox Android Полная поддержка 45Opera Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Safari iOS Полная поддержка 9Samsung Internet Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
stretchChrome Полная поддержка 57Edge Полная поддержка 79Firefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 9WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 52Opera Android Полная поддержка 43Safari iOS Полная поддержка 9Samsung Internet Android Полная поддержка 7.0

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-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

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

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

Таблица совместимости на этой странице формируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение изменений.

Поддержка в разметке Flex

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Supported in Flex LayoutChrome Полная поддержка 52Edge Полная поддержка 12Firefox Полная поддержка 20IE Полная поддержка 11Opera Полная поддержка 12.1Safari Полная поддержка 9WebView Android Полная поддержка 52Chrome Android Полная поддержка 52Firefox Android Полная поддержка 20Opera Android Полная поддержка 12.1Safari iOS Полная поддержка 9Samsung Internet Android Полная поддержка 6.0

Легенда

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

Поддержка в разметке Grid

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Supported in Grid LayoutChrome Полная поддержка 57Edge Полная поддержка 16Firefox Полная поддержка 45IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 45Opera Android Полная поддержка 43Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0

Легенда

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

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

justify-content | CSS справочник

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

11.0+ 28.0+ 29.0+ 17.0+ 9.0+

Описание

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

Примечание: для выравнивания flex-элементов по вертикали используйте свойство align-items.

Значение по умолчанию: flex-start
Применяется: к flex-контейнерам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.justifyContent="space-between";

Синтаксис

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

Значения свойства

Значение Описание
flex-start Значение по умолчанию. flex-элементы располагаются друг за другом слева направо, прилегая к левой границе flex-контейнера.
flex-end flex-элементы располагаются друг за другом слева направо, прилегая к правой границе flex-контейнера.
center flex-элементы располагаются друг за другом точно по центру flex-контейнера, то есть слева и справа от элементов расстояние до границ контейнера будет одинаковым.

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

space-between flex-элементы равномерно распределяются по горизонтали так, чтобы между каждой парой соседних элементов расстояние было одинаковым. Первый элемент прилегает своей левой границей к левой границе контейнера, а последний элемент прилегает своей правой границей к правой границе контейнера.

Примечание: если flex-элементы занимают больше горизонтального пространства, чем ширина контейнера, или flex-элемент всего один, то данное значение будет соответствовать значению flex-start.

space-around flex-элементы равномерно распределяются по горизонтали так, чтобы между каждой парой соседних элементов расстояние было одинаковым. Пустое пространство перед первым и после последнего элемента равно половине расстояния между каждой парой соседних элементов.

Примечание: если flex-элементы занимают больше горизонтального пространства, чем ширина контейнера, или flex-элемент всего один, то данное значение будет соответствовать значению center.

Пример

#demoDIV {
display: flex;
justify-content: flex-start;
}

CSS свойство выравнивания текста по ширине


Пример

Установите метод выравнивания "между словами", если для параметра выравнивания текста установлено значение «оправдать»:

ДИВ {
выравнивание текста: выравнивание;
выравнивание текста по ширине: между словами;
}

Попробуй сам "

Определение и использование

Свойство выравнивания текста по ширине определяет метод выравнивания текста, когда для text-align установлено значение «justify».

Значение по умолчанию: авто
Унаследовано: да
Анимация: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.textJustify = "межслово"

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Свойство
с выравниванием текста Да * 11,0 55.0 10.0.3 Да *

* Эта функция находится за параметром Включить экспериментальные функции веб-платформы (необходимо установить значение Включено). Чтобы изменить настройки в Chrome: введите "chrome: // flags" в Браузер Chrome. Чтобы изменить настройки в Opera: введите «флаги» в Opera браузер.



Синтаксис CSS

выравнивание текста: автоматически | между словами | между символами | нет | начальная | наследование;

Стоимость недвижимости

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

CSS свойство justify-content


Пример

Выровняйте гибкие элементы по центру контейнера:

ДИВ {
дисплей: гибкий;
justify-content: center;
}

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Свойство justify-content выравнивает элементы гибкого контейнера, когда элементы не используют все доступное пространство на главной оси (по горизонтали).

Совет: Используйте свойство align-items для выравнивания элементов по вертикали.

Значение по умолчанию: гибкий старт
Унаследовано: нет
Анимация: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.justifyContent = "пространство-между" Попытайся

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit- или -moz- указывают первую версию, которая работала с префиксом.

Объект
justify-content 29.0
21.0 -webkit-
11,0 28,0
18,0 -моз-
9,0
6,1 веб-набор
17,0


Синтаксис CSS

justify-content: flex-start | flex-end | center | space-between | space-around | начальный | наследование;

Стоимость недвижимости

Значение Описание Играй
гибкий старт Значение по умолчанию.Предметы располагаются в начале контейнера Играй »
гибкий конец Предметы расположены в конце контейнера Играй »
центр Предметы расположены в центре контейнера Играй »
пространство между Элементы размещаются с пробелом между строками Играй »
космос-вокруг Элементы помещаются с пробелом до, между и после строк Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальный Играй »
наследство Наследует это свойство от своего родительского элемента. Читать про наследство

Другие примеры

Пример

Выровняйте гибкие элементы в начале контейнера (по умолчанию):

ДИВ {
дисплей: гибкий;
justify-content: гибкий старт;
}

Попробуй сам "

Пример

Выровняйте гибкие элементы в конце контейнера:

ДИВ {
дисплей: гибкий;
justify-content: гибкий конец;
}

Попробуй сам "

Пример

Отобразите элементы гибкости с пробелом между строками:

ДИВ {
дисплей: гибкий;
justify-content: пробел между;
}

Попробуй сам "

Пример

Отображать гибкие элементы с пробелом до, между и после строк:

ДИВ {
дисплей: гибкий;
justify-content: пространство вокруг;
}

Попробуй сам "

Связанные страницы

Ссылка CSS: свойство align-content

Ссылка CSS: свойство align-items

Ссылка CSS: свойство align-self

Ссылка на HTML DOM: свойство justifyContent


,

html - Как выровнять последнюю строку текста в CSS по центру?

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Общественные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним возможности технической карьеры
  5. Талант Нанять технических талантов
.

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

Свойство CSS text-align устанавливает горизонтальное выравнивание блочного элемента или поля таблицы-ячейки. Это означает, что он работает как vertical-align , но в горизонтальном направлении.

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

Синтаксис

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

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

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

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

Свойство text-align задается одним из следующих способов:

Значения

начало
То же, что слева , если направление слева направо, и справа , если направление справа налево.
конец
То же, что справа , если направление слева направо и слева, , если направление справа налево.
слева
Встроенное содержимое выравнивается по левому краю строчного поля.
правый
Встроенное содержимое выравнивается по правому краю строчного поля.
центр
Встроенное содержимое центрируется в рамке строки.
оправдать
Встроенное содержимое оправдано. Текст должен располагаться таким образом, чтобы его левый и правый края совпадали с левым и правым краями линейного поля, за исключением последней строки.
оправдать-все
То же, что , выравнивание , но также принудительное выравнивание последней строки.
Соответствующий родитель
Аналогично наследует , но значения start и end вычисляются в соответствии с направлением родителя и заменяются соответствующим значением слева или справа .
<строка>
При применении к ячейке таблицы указывает символ выравнивания, вокруг которого будет выровнено содержимое ячейки.

Проблемы доступности

Несогласованный интервал между словами, создаваемый выровненным текстом, может быть проблемой для людей с когнитивными проблемами, такими как дислексия.

Формальное определение

Начальное значение start , или безымянное значение, которое действует как left , если направление равно ltr , right , если направление равно rtl , если start , если start браузер.
Применимо к блок-контейнерам
Унаследовано да
Вычисленное значение , как указано, за исключением , значение сопоставимого родителя, которое рассчитывается относительно значения родительского элемента и направления его родительского элемента. в вычисленном значении слева или справа
Тип анимации дискретный

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

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

Примеры

Выравнивание по левому краю

HTML
 

Целочисленный элемент массы в пустом месте 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.

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

Текст по центру

HTML
 

Целочисленный элемент массы в пустом месте 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.

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

Обосновать

HTML
 

Целочисленный элемент массы в пустом месте 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.

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

Банкноты

Стандартный способ центрирования самого блока без центрирования его встроенного содержимого - это установка левого и правого поля от до авто , например:

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

Технические характеристики

Совместимость с браузером

Обновите данные о совместимости на GitHub
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android 9024 Chrome для Android 9024 Chrome для Android 9024 Chrome для Android 9024 Chrome для Android 9024 Opera для Android Safari на iOS Samsung Internet
с выравниванием по тексту Chrome Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 3 Opera Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Internet Android Полная поддержка 1.0
центр с префиксом , слева и справа значений для выравнивания блоков Chrome Полная поддержка 1
Полная поддержка 1
С префиксом Реализовано с префиксом поставщика: -webkit-
Edge Полная поддержка 79
Полная поддержка 79
С префиксом Реализовано с префиксом поставщика: -webkit-
Firefox Полная поддержка 1
Полная поддержка 1
С префиксом Реализовано с префиксом поставщика: -moz-
IE Нет поддержки Opera Полная поддержка 15
Полная поддержка 15
С префиксом Реализовано с префиксом поставщика: -webkit-
Safari Полная поддержка 1.3
Полная поддержка 1.3
С префиксом Реализовано с префиксом поставщика: -webkit-
Полная поддержка 1
С префиксом Реализовано с префиксом поставщика: -khtml-
WebView Android Полная поддержка 37
Полная поддержка 37
С префиксом Реализовано с префиксом поставщика: -webkit-
Chrome Android Полная поддержка 18
Полная поддержка 18
С префиксом Реализовано с префиксом поставщика: -webkit-
Firefox Android Полная поддержка 4
Полная поддержка 4
С префиксом Реализовано с префиксом поставщика: -moz-
Opera Android Полная поддержка 14
Полная поддержка 14
С префиксом Реализовано с префиксом поставщика: -webkit-
Safari iOS Полная поддержка 1
Полная поддержка 1
С префиксом Реализовано с префиксом поставщика: -webkit-
Полная поддержка 1
С префиксом Реализовано с префиксом поставщика: -khtml-
Samsung Internet Android Полная поддержка 1.0
Полная поддержка 1.0
С префиксом Реализуется с префиксом поставщика: -webkit-
Значения относительного расхода начало и конец Хром Полная поддержка 1 Кромка Полная поддержка 79 Firefox Полная поддержка 1 IE Нет поддержки Opera Полная поддержка 15 Safari Полная поддержка 3.1 WebView Android Полная поддержка 37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 2 Samsung Internet Android Полная поддержка 1.0
justify-all Хром Нет поддержки Нет Кромка Нет поддержки Firefox Нет поддержки IE Нет поддержки Opera Нет поддержки Safari Нет поддержки WebView Android Нет поддержки Chrome Android Нет поддержки Firefox Android Нет поддержки Opera Android Нет поддержки Safari iOS Нет поддержки Samsung Internet Android Нет поддержки
родитель хром Полная поддержка 16 Кромка Полная поддержка 79 Firefox Полная поддержка 40 IE Нет поддержки Opera Полная поддержка 15 Safari Нет поддержки WebView Android Полная поддержка 37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 40 Opera Android Полная поддержка 14 Safari iOS Нет поддержки Samsung Internet Android Полная поддержка 1.0
Выравнивание на основе символов в столбце таблицы (значение ) Chrome Нет поддержки Нет Кромка Нет поддержки Firefox Нет поддержки IE Нет поддержки Opera Нет поддержки Safari Нет поддержки WebView Android Нет поддержки Chrome Android Нет поддержки Firefox Android Нет поддержки Opera Android Нет поддержки Safari iOS Нет поддержки Samsung Internet Android Нет поддержки

Условные обозначения

Полная поддержка
Полная поддержка
Нет поддержки
Нет поддержки
Экспериментально.Ожидайте, что поведение изменится в будущем.
Экспериментальная. Ожидайте, что поведение изменится в будущем.
Нестандартный. Ожидайте плохой кросс-браузерной поддержки.
Нестандартный. Ожидайте плохой кросс-браузерной поддержки.
Не рекомендуется. Не для использования на новых сайтах.
Устарело. Не для использования на новых сайтах.
Для использования требуется префикс поставщика или другое имя.
Для использования требуется префикс поставщика или другое имя.

См. Также

,

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

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