Свойство align-items
указывает выравнивание по умолчанию для элементов во flex-контейнере.
Значение по умолчанию: | stretch |
Применяется к: | Flex containers |
Наследование: | Нет |
Анимирование: | Нет. Анимируемые свойства |
Версия: | Новый в CSS3 |
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
align-items: baseline | center | flex-start | flex-end | stretch | initial | inherit
Примеры написания кода свойства align-items
:
.flex-container {
/* Safari */
display: -webkit-flex;
-webkit-align-items: center;
/* Standard syntax */
display: flex;
align-items: center;
}
Значения свойств
В следующей таблице описаны значения этого свойства.
Значение | Описание |
---|---|
baseline |
Элементы расположены на базовой линии flex-контейнера. |
center |
Элементы расположены в центре flex-контейнера. |
flex-start |
Элементы расположены в начале flex-контейнера. |
flex-end |
Элементы расположены в конце flex-контейнера. |
stretch |
Элементы растягиваются, чтобы соответствовать flex-контейнеру. Свободное пространство делится поровну между всеми элементами. Это значение установлено по умолчанию. |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента align-items . |
Поддержка браузеров
Свойство align-items
поддерживается во всех основных браузерах.
Apple Safari версии 7 и выше поддерживает свойство align-items
, но требует префикс -webkit-
, например -webkit-align-items: center;