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

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.