align-items ^CSS

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

Значение по умолчанию:

stretch

Наследуется:

Нет

Применяется:

К флекс-контейнеру

Анимируется:

Нет

Объект JavaScript:

object.style.alignItems

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

CSS Flexible Box Layout Module

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

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Синтаксис

/* Basic keywords */ 
align-items: normal; 
align-items: stretch; 

/* Positional alignment */ 
align-items: center; /* Pack items around the center */ 
align-items: start; /* Pack items from the start */ 
align-items: end; /* Pack items from the end */ 
align-items: flex-start; /* Pack flex items from the start */ 
align-items: flex-end; /* Pack flex items from the end */ 
align-items: self-start; 
align-items: self-end; 
align-items: left; /* Pack items from the left */ 
align-items: right; /* Pack items from the right */ 

/* Baseline alignment */
align-items: baseline; 
align-items: first baseline; 
align-items: last baseline; /* Overflow alignment (for positional alignment only) */ 
align-items: safe center; 
align-items: unsafe center; 

/* Global values */ 
align-items: inherit; 
align-items: initial; 
align-items: unset;

Значения

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

Примеры

<!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 class="flex-container">
            <div class="flex-item item1">Фенек — лисица, живущая в пустынях Северной Африки. Имеет достаточно миниатюрный размер и своеобразную внешность с большими ушами.</div>
            <div class="flex-item item2">Корсак — хищное млекопитающее рода лисиц.</div>
            <div class="flex-item item3">Лисица — хищное млекопитающее семейства псовых, наиболее распространённый и самый крупный вид рода лисиц.</div>
        </div>
    </body>
</html>

Примечание

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

В начало

align-items CSS