align-items CSS

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

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

stretch

Значение по умолчанию:
`stretch`
Наследуется:
Нет
Применяется:

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

Применяется:
К флекс-контейнеру
Анимируется:
Нет
Объект JavaScript:

object.style.alignItems

Объект JavaScript:
`object.style.alignItems`
Спецификации:
Спецификации:
* [CSS Flexible Box Layout Module](https://www.w3.org/TR/css-flexbox/#propdef-align-items)
Поддержка браузерами:

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

Поддержка браузерами:
<p class="ciu_embed" data-feature="flexbox" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=flexbox">Can I Use flexbox?</a> Data on support for the flexbox feature across the major browsers from caniuse.com. </p>

Синтаксис

/* 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;

Синтаксис

/* 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
flex-start
Флексы выравниваются в начале поперечной оси контейнера.
center
center
center
Флексы выравниваются по линии поперечной оси.
flex-end
flex-end
flex-end
Флексы выравниваются в конце поперечной оси контейнера.
stretch
stretch
stretch
Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.
baseline
baseline
baseline
Флексы выравниваются по их базовой линии.

Значения

<table class="data"> <thead> <tr><th>Значение</th><th>Положение</th><th>Описание</th></tr> </thead> <tbody> <tr><td>flex-start</td><td><img src="/workspace/uploads/css/flex-start_1.png" alt="flex-start" /></td><td>Флексы выравниваются в начале поперечной оси контейнера.</td></tr> <tr><td>center</td><td><img src="/workspace/uploads/css/center.png" alt="center" /></td><td>Флексы выравниваются по линии поперечной оси.</td></tr> <tr><td>flex-end</td><td><img src="/workspace/uploads/css/flex-end_1.png" alt="flex-end" /></td><td>Флексы выравниваются в конце поперечной оси контейнера.</td></tr> <tr><td>stretch</td><td><img src="/workspace/uploads/css/stretch_1.png" alt="stretch" /></td><td>Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.</td></tr> <tr><td class="value">baseline</td><td><img src="/workspace/uploads/css/baseline.png" alt="baseline" /></td><td>Флексы выравниваются по их базовой линии.</td></tr> </tbody> </table>

Примеры

<!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.

Примеры

<!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`.

Содержание

  • Синтаксис
      /* 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;
  • Значения
    • Примеры
      • Примечание
      • <!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`.

    В начало