Content align css: align-content | CSS | WebReference

Содержание

align-content | CSS | WebReference

Задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.

Краткая информация

Значение по умолчаниюstretch
НаследуетсяНет
ПрименяетсяК флекс-контейнеру
АнимируетсяНет

Синтаксис

align-content: flex-start | flex-end | center | 
  space-between | space-around | space-evenly | stretch

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>align-content</title> <style> .flex-container { width: 70px; height: 240px; border: 1px solid #333; padding: 10px; display: flex; flex-wrap: wrap; align-content: center; } .flex-container div { width: 70px; height: 70px; border-radius: 50%; } .red { background: red; } .yellow { background: yellow; } .green { background: green; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Использование свойства align-content

Объектная модель

Объект.style.alignContent

Примечание

Safari до версии 9 поддерживает свойство -webkit-align-content.

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

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

Supported in Flex LayoutChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 21
С префиксом Требует вендорный префикс: -webkit-
Edge
Полная поддержка
12
Полная поддержка 12
Полная поддержка 12
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 28
Полная поддержка 28
Полная поддержка 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 Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка ≤37
С префиксом Требует вендорный префикс: -webkit-
Chrome Android
Полная поддержка
29
Полная поддержка 29
Полная поддержка 25
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 28
Полная поддержка 28
Полная поддержка 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
Полная поддержка 7
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 2.0
Полная поддержка 2.0
Полная поддержка 1.5
С префиксом Требует вендорный префикс: -webkit-
baseline
Chrome Полная поддержка 57Edge Полная поддержка 79Firefox Полная поддержка 45IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 9WebView Android Полная поддержка 57Chrome Android Полная поддержка
57
Firefox Android Полная поддержка 45Opera Android Полная поддержка 43Safari iOS Полная поддержка 9Samsung Internet Android Полная поддержка 7.0
first baseline and last baselineChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка
52
IE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка 11WebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 52Opera Android Нет поддержки НетSafari iOS Полная поддержка 11Samsung Internet Android Нет поддержки Нет
left and rightChrome Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Edge Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Firefox Нет поддержки 52 — 60
Нет поддержки 52 — 60
Замечания align-content no longer accepts the left and right values
IE Нет поддержки НетOpera Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Safari Нет поддержки НетWebView Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Chrome Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Firefox Android Нет поддержки 52 — 60
Нет поддержки 52 — 60
Замечания align-content no longer accepts the left and right values
Opera Android Нет поддержки Нет
Нет поддержки Нет
Замечания This value is recognized, but has no effect.
Safari iOS Нет поддержки НетSamsung 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 Нет поддержки НетWebView 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 Нет поддержки НетSamsung 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

Свойство align-content | CSS справочник

CSS свойства

Определение и применение

CSS свойство align-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально), или производит выравнивание всего макета сетки по оси столбца grid-контейнера.

Для того, чтобы определить как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси строки grid-контейнера, вы можете воспользоваться свойством justify-content.


При работе с флекс элементами обратите внимание на то, что свойство align-content возможно применить только к многострочным флекс контейнерам (flex-wrap, или flex-flow со значениями wrap | wrap-reverse).

Если элемент не является флекс элементом, или элементом сетки макета (не находится внутри родительского элемента, который является блочным, или строчным флекс, или grid-контейнером), то свойство align-content не окажет на такой элемент никакого эффекта.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS «Верстка по Flexbox (работа с контейнерами)».


Схематичное отображение работы свойства align-content отображено на следующем изображении:

* — для элементов сетки макета (grid-элементы) допускается использование сокращенных значений start и end, для флекс элементов необходимо использовать полные значения flex-start и flex-end.

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

CSS синтаксис:

/* flex-контейнеры */
align-content: "stretch | flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit";

/* grid-контейнеры */
align-content: "stretch | start | end | center | space-between | space-around | space-evenly | initial | inherit";

JavaScript синтаксис:

object.style.alignContent = "space-between"

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

ЗначениеОписание
stretchСтроки внутри контейнера равномерно растягиваются, заполняя свободное пространство (изменяет размер элементов сетки, или флекс элементов, чтобы элементы заполнили всю высоту контейнера). Это значение по умолчанию.
flex-startСтроки внутри контейнера располагаются в начале поперечной оси флекс контейнера, или начального края сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start, для флекс элементов необходимо использовать полное значение flex-start
flex-endСтроки внутри контейнера располагаются в конце поперечной оси флекс контейнера, или по краю сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end, для флекс элементов необходимо использовать полное значение flex-end.
centerСтроки внутри контейнера располагаются по его центру.
space-betweenСтроки внутри контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.
space-around

Строки внутри контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками:

space-evenly

Размещает четный промежуток между каждой строкой, включая верхний и нижний край контейнера:

initialУстанавливае

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

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

11.0+ 28.0+ 21.0+ 12.1+ 9.0+

Описание

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

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

Значение по умолчанию: stretch
Применяется: к многострочным flex-контейнерам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.alignContent=»center»;

Синтаксис

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

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

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

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

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

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

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

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

Пример

#main {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}

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

Свойство align-content устанавливает тип выравнивания строк флекс-элементов по вертикали внутри флекс-контейнера, позволяя управлять свободным пространством.

Свойство align-content работает только в случае, если разрешен перенос строк и указано направление flex-flow: row/row-reverse/column/column-reverse wrap/wrap-reverse; и высота flex-контейнера.

CSS синтаксис

align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;

Возможные значения

ЗначениеОписание
stretchЗначение по умолчанию. Строки флекс-элементов равномерно растягиваются, заполняя все доступное пространство.
centerСтроки флекс-элементов выравниваются по высоте по середине контейнера относительно его левого края.
flex-startСтроки флекс-элементов выравниваются по левому краю контейнера относительно его верхнего края.
flex-endСтроки флекс-элементов выравниваются по левому краю контейнера относительно его нижнего края.
space-betweenСтроки флекс-элементов выравниваются по высоте по середине контейнера относительно его левого края. Свободное пространство распределяется между ними. Первый ряд флекс-элементов прижимается к началу контейнера, последний ряд — к нижнему краю.
space-aroundСтроки флекс-элементов равномерно распределяются по высоте, свободное пространство добавляется сверху и снизу строки.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Упаковываем строки в середину флекс-контейнера


div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

align-items | CSS | WebReference

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

Краткая информация

Значение по умолчаниюstretch
НаследуетсяНет
ПрименяетсяК флекс-контейнеру
АнимируетсяНет

Синтаксис

align-items: flex-start | flex-end | center | baseline | stretch

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>align-items</title> <style> .flex-container { display: flex; align-items: stretch; /* Растягиваем */ } .flex-item { margin-left: 1rem; /* Расстояние между блоков */ padding: 10px; /* Поля вокруг текста */ width: 33.333%; /* Ширина блоков */ } .flex-item:first-child { margin-left: 0; } .item1 { background: #F0BA7D; } .item2 { background: #CAE2AA; } .item3 { background: #A6C0C9; } </style> </head> <body> <div> <div> Фенек — лисица, живущая в пустынях Северной Африки. Имеет достаточно миниатюрный размер и своеобразную внешность с большими ушами. </div> <div> Корсак — хищное млекопитающее рода лисиц. </div> <div> Лисица — хищное млекопитающее семейства псовых, наиболее распространённый и самый крупный вид рода лисиц. </div> </div> </body> </html>

Результат данного примера показан на рис. 1. За счёт использования значения stretch у атрибута align-items блоки получаются одинаковой высоты, несмотря на разное содержимое.

Рис. 1. Блоки одинаковой высоты

Объектная модель

Объект.style.alignItems

Примечание

Safari до версии 9 поддерживает свойство -webkit-align-items.

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

text-align | CSS | WebReference

Определяет горизонтальное выравнивание текста в пределах элемента.

Краткая информация

Значение по умолчаниюleft
НаследуетсяДа
ПрименяетсяК блочным контейнерам
АнимируетсяНет

Синтаксис

text-align: center | justify | left | right | start | end

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краям. Чтобы произвести это действие, браузер в этом случае добавляет пробелы между словами.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остаётся aquo;рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объёмом не более трёх строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
start
Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end
Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-align</title> <style> div { border: 1px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ margin-bottom: 5px; /* Отступ снизу */ } #left { text-align: left; } #right { text-align: right; } #center { text-align: center; } .content { width: 75%; /* Ширина слоя */ background: #fc0; /* Цвет фона */ } </style> </head> <body> <div><div>Выравнивание по левому краю</div></div> <div><div>Выравнивание по центру</div></div> <div><div>Выравнивание по правому краю</div></div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

Объект.style.textAlign

Примечание

IE до версии 7 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

left, right, center, justify381213.511
start, end791153.12
left, right, center, justify1.5141
start, end8068463.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 25.04.2020

Редакторы: Влад Мержевич

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


Пример

Линии упаковки к центру гибкого контейнера:

div {
ширина: 70 пикселей;
высота: 300 пикселей;
граница: сплошная 1px # c3c3c3;
дисплей: гибкий;
flex-wrap: обертка;
align-content: center;
}

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

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

Свойство align-content изменяет поведение свойство flex-wrap.Это похоже на align-items, но вместо выравнивания гибких элементов он выравнивает гибкие линии.

Примечание: Для этого должно быть несколько строк товаров свойство иметь какой-либо эффект!

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

Значение по умолчанию: растяжка
Унаследовано: нет
Анимируемый: нет.Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.alignContent = «center» Попробуй это

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

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

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

Объект
align-content 21,0 11,0 28,0 9.0
7.0 -вебкит-
12,1


Синтаксис CSS

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

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

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

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

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

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

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

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



.

align-content — Ссылка CSS

  • Все объекты
  • Анимации
  • Фоны
  • Модель коробки
  • Flexbox
  • CSS-сетка
  • Выбор позиции
  • переходов
  • Типографика
  • align-content
  • align-items
  • align-self
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-time-function
  • animation
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background- повтор
  • background-size
  • background
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-bottom
  • border-collapse
  • Цвет рамки
  • Цвет рамки слева
  • Стиль рамки слева
  • Ширина рамки слева
  • 90 087 border-left
  • border-radius
  • border-right-color
  • border-right-style
  • border-right-width
  • border-right
  • border-style
  • border-top-color
  • border -top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-top
  • border-width
  • border
  • bottom
  • box-shadow
  • размер коробки
  • прозрачный
  • цвет
  • количество столбцов
  • промежуток между столбцами
  • ширина столбца
  • содержимое
  • курсор
  • дисплей
  • гибкое основание
  • гибкое направление 9000 поток4
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font-family
  • font-size
  • font-style
  • font-option
  • font-weight
  • font
  • grid площадь 900 04
  • сетка-автоколонны
.

html — Как выровнять содержимое div по нижнему краю

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

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

Модуль CSS Box Alignment определяет функции CSS, которые относятся к выравниванию полей в различных моделях макета CSS-боксов: макет блока, макет таблицы, макет гибкости и макет сетки. Модуль направлен на создание единого метода выравнивания для всего CSS. В этом документе подробно описаны общие концепции, содержащиеся в спецификации.

Примечание : В документации для каждого метода компоновки будет подробно описано, как там применяется выравнивание поля.

Старые методы выравнивания

CSS традиционно имел очень ограниченные возможности выравнивания. Мы смогли выровнять текст с помощью text-align , центральные блоки с использованием автоматического поля s, а также в макетах таблиц или встроенных блоков с помощью свойства vertical-align . Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text, и впервые в Box Alignment у нас есть возможности полного горизонтального и вертикального выравнивания.

Если вы изначально изучали Flexbox, то можете считать эти свойства частью спецификации Flexbox, и некоторые из свойств действительно перечислены на уровне 1 Flexbox.Однако в спецификации отмечается, что следует ссылаться на спецификацию Box Alignment, поскольку она может добавить дополнительные возможности по сравнению с тем, что в настоящее время находится во Flexbox.

Основные примеры

Следующие примеры демонстрируют, как некоторые свойства выравнивания блока применяются в сетке и Flexbox.

Пример выравнивания макета сетки CSS

В этом примере с использованием компоновки сетки после размещения дорожек фиксированной ширины на встроенной (основной) оси в контейнере сетки остается дополнительное пространство.Это пространство распределяется с использованием justify-content . На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью align-items . Первый элемент отменяет значение align-items , установленное для группы, путем установки align-self на center .

Пример выравнивания Flexbox

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

Ключевые понятия и терминология

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

Связь с режимами записи

Выравнивание связано с режимами письма в том смысле, что при выравнивании элемента мы не учитываем, выравниваем ли мы его по физическим размерам сверху, справа, снизу и слева.Вместо этого мы описываем выравнивание в терминах начала и конца конкретного измерения, с которым мы работаем. Это гарантирует, что выравнивание работает одинаково вне зависимости от режима записи документа.

Два измерения центровки

При использовании свойств выравнивания блока вы будете выравнивать содержимое по одной из двух осей — встроенной (или основной) оси и блочной (или поперечной) оси. Встроенная ось — это ось, по которой слова в предложении перемещаются в используемом режиме письма. Например, для английского языка встроенная ось горизонтальна.Ось блока — это ось, вдоль которой размещаются блоки, такие как элементы абзаца, и она проходит поперек оси Inline.

При выравнивании элементов по встроенной оси вы будете использовать свойства, которые начинаются с justify- :

При выравнивании элементов по оси блока вы будете использовать свойства, начинающиеся с align- :

Flexbox добавляет дополнительную сложность в том, что вышесказанное верно, когда flex-direction установлено на row .Свойства меняются местами, когда для flexbox установлено значение , столбец . Следовательно, при работе с flexbox легче думать об основной и поперечной оси, чем о встроенных и блочных. Свойства justify- всегда используются для выравнивания по главной оси, свойства align- по поперечной оси.

Расклад

Выравниваемый объект — это то, что выравнивается. Для justify-self или align-self , или при установке этих значений как группы с justify-items или align-items , это будет поле поля элемента, для которого это свойство используется .Свойства justify-content и align-content различаются в зависимости от метода компоновки.

Выравнивающий контейнер

Контейнер выравнивания — это коробка, внутри которой выравнивается объект. Обычно это содержащий блок объекта выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.

На изображении ниже показан контейнер для совмещения с двумя объектами совмещения внутри.

Резервное выравнивание

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

Типы раскладок

В спецификации подробно описаны три различных типа выравнивания; в них используются значения ключевых слов.

  • Позиционное выравнивание : указание положения объекта выравнивания по отношению к его контейнеру выравнивания.
  • Базовое выравнивание : Эти ключевые слова определяют выравнивание как отношение между базовыми линиями нескольких субъектов выравнивания в контексте выравнивания.
  • Распределенное выравнивание : Эти ключевые слова определяют выравнивание как распределение пространства между субъектами выравнивания.

Значения ключевых слов позиционного выравнивания

Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с justify-content и align-content , а также для самовыравнивания с justify-self и align-self .

  • центр
  • начало
  • конец
  • самозапуск
  • саморез
  • flex-start только для Flexbox
  • гибкий конец только для Flexbox
  • слева
  • правый

За исключением физических значений слева и справа , которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи контента.

Например, при работе в CSS Grid Layout, если вы работаете на английском языке и установите justify-content на start , это переместит элементы во встроенном измерении в начало, которое будет слева как предложения на английском языке. начать слева. Если бы вы использовали арабский язык (язык справа налево), то такое же значение start привело бы к перемещению элементов вправо, поскольку предложения на арабском языке начинаются с правой стороны страницы.

Оба этих примера имеют justify-content: start , однако местоположение начала изменяется в соответствии с режимом записи.

Базовое выравнивание

Ключевые слова базового выравнивания используются для выравнивания базовых линий прямоугольников по группе объектов выравнивания. Их можно использовать в качестве значений для выравнивания контента с justify-content и align-content , а также для самовыравнивания с justify-self и align-self .

  • исходный
  • первая базовая
  • последняя исходная

Базовое выравнивание содержимого — указание значения выравнивания базовой линии для justify-content или align-content — работает в методах макета, которые размещают элементы в строках.Объекты выравнивания выравниваются по базовой линии относительно друг друга, добавляя отступы внутри полей.

Самовыравнивание по базовой линии сдвигает поля для выравнивания по базовой линии, добавляя поля за пределами полей. Самовыравнивание происходит при использовании justify-self или align-self , или при установке этих значений как группы с justify-items и align-items .

Распределенное выравнивание

Ключевые слова распределенного выравнивания используются со свойствами align-content и justify-content .Эти ключевые слова определяют, что происходит с любым дополнительным пространством после отображения объектов выравнивания. Значения следующие:

  • растяжка
  • расстояние между
  • пространство вокруг
  • равномерно

Например, в Flex Layout элементы изначально выровнены с flex-start . При работе в горизонтальном режиме письма сверху вниз, таком как английский, с flex-direction в качестве строки элементы начинаются в крайнем левом углу, а любое доступное пространство после отображения элементов помещается после элементов.

Если вы установите justify-content: space-between на гибкий контейнер, доступное пространство теперь распределяется и размещается между элементами.

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

Выравнивание переполнения

Ключевые слова safe и unsafe помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания.Ключевое слово safe будет выровнено с start в случае указанного выравнивания, вызывающего переполнение, цель состоит в том, чтобы избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокрутил до.

Если вы укажете unsafe , то выравнивание будет выполнено, даже если это приведет к такой потере данных.

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

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

Свойство gap является сокращением для row-gap и column-gap , что позволяет нам установить эти свойства сразу:

В приведенном ниже примере компоновка сетки использует сокращение gap для установки зазора 10px между дорожками строк и зазора 2em между дорожками столбцов.

В этом примере я использую свойство grid-gap в дополнение к gap . Свойства зазора изначально имели префикс grid- в спецификации Grid Layout, и некоторые браузеры поддерживают только эти версии с префиксом.

Версии с префиксами будут поддерживаться как псевдонимы без префиксов, однако вы всегда можете удвоить их так же, как с префиксами поставщиков, добавив свойство grid-gap , а затем свойство gap с теми же значениями. .

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

Страницы с подробным описанием индивидуальных свойств выравнивания

Поскольку свойства выравнивания блока CSS реализуются по-разному в зависимости от спецификации, с которой они взаимодействуют, обратитесь к следующим страницам для каждого типа макета для получения подробной информации о том, как использовать свойства выравнивания с ним:

Номер ссылки

Свойства CSS

Глоссарий

Руководства

Внешние ресурсы

.

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

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

Theme: Overlay by Kaira Extra Text
Cape Town, South Africa