Свойство 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;
















