Content align css: align-content | CSS

Содержание

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 Layout	Chrome Полная поддержка 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 Полная поддержка 11	Opera Полная поддержка 12.1	Safari Полная поддержка 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.1	Safari iOS Полная поддержка 9 Полная поддержка 9 Полная поддержка 7 С префиксом Требует вендорный префикс: -webkit-	Samsung Internet Android Полная поддержка 2.0 Полная поддержка 2.0 Полная поддержка 1.5 С префиксом Требует вендорный префикс: -webkit-
`baseline`	Chrome Полная поддержка 57	Edge Полная поддержка 79	Firefox Полная поддержка 45	IE Нет поддержки Нет	Opera Полная поддержка 44	Safari Полная поддержка 9	WebView Android Полная поддержка 57	Chrome Android Полная поддержка 57	Firefox Android Полная поддержка 45	Opera Android Полная поддержка 43	Safari iOS Полная поддержка 9	Samsung Internet Android Полная поддержка 7.0
`first baseline` and `last baseline`	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Полная поддержка 52	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Полная поддержка 11	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android Полная поддержка 52	Opera Android Нет поддержки Нет	Safari iOS Полная поддержка 11	Samsung Internet Android Нет поддержки Нет
`left` and `right`	Chrome Нет поддержки Нет Нет поддержки Нет Замечания 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 `unsafe`	Chrome Нет поддержки Нет Нет поддержки Нет Замечания This value is recognized, but has no effect.	Edge Нет поддержки Нет Нет поддержки Нет Замечания This value is recognized, but has no effect.	Firefox Полная поддержка 63	IE Нет поддержки Нет	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 Полная поддержка 63	Opera 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-evenly`	Chrome Полная поддержка 60	Edge Полная поддержка 79	Firefox Полная поддержка 52	IE Нет поддержки Нет	Opera Полная поддержка 47	Safari Полная поддержка 11	WebView Android Полная поддержка 60	Chrome Android Полная поддержка 60	Firefox Android Полная поддержка 52	Opera Android Полная поддержка 44	Safari iOS Полная поддержка 11	Samsung Internet Android Полная поддержка 8.0
`start` and `end`	Chrome Нет поддержки Нет Нет поддержки Нет Замечания This value is recognized, but has no effect.	Edge Нет поддержки Нет Нет поддержки Нет Замечания This value is recognized, but has no effect.	Firefox Полная поддержка 45	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 Полная поддержка 45	Opera Android Нет поддержки Нет Нет поддержки Нет Замечания This value is recognized, but has no effect.	Safari iOS Нет поддержки Нет	Samsung Internet Android Нет поддержки Нет Нет поддержки Нет Замечания This value is recognized, but has no effect.
`stretch`	Chrome Полная поддержка 57	Edge Полная поддержка 79	Firefox Полная поддержка 52	IE Нет поддержки Нет	Opera Полная поддержка 44	Safari Полная поддержка 9	WebView Android Полная поддержка 57	Chrome Android Полная поддержка 57	Firefox Android Полная поддержка 52	Opera Android Полная поддержка 43	Safari iOS Полная поддержка 9	Samsung 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 синтаксис

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

Значение	Описание
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, justify	3	8	12	1	3.5	1	1
start, end			79	1	15	3.1	2


left, right, center, justify	1.5	1	4	1
start, end	80	68	46	3.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 по нижнему краю

Переполнение стека

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

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 реализуются по-разному в зависимости от спецификации, с которой они взаимодействуют, обратитесь к следующим страницам для каждого типа макета для получения подробной информации о том, как использовать свойства выравнивания с ним:

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Content align css: align-content | CSS | WebReference

align-content | CSS | WebReference

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

Синтаксис

Обозначения

Пример

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

Примечание

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

Браузеры

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

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

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

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

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

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

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

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

Описание

Синтаксис

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

Пример

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

CSS синтаксис

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

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

align-items | CSS | WebReference

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

Синтаксис

Обозначения

Пример

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

Примечание

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

Браузеры

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

text-align | CSS | WebReference

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

Синтаксис

Обозначения

Значения

Песочница

Пример

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

Примечание

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

Браузеры

Браузеры

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

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

Пример

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

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

Синтаксис CSS

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

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

align-content — Ссылка CSS

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

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

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

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

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

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

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

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

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

Расклад

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

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

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

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

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

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

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

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

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

Номер ссылки

Свойства CSS

Глоссарий

Руководства