align-self ^CSS

Become a Patron!

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

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

auto

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

Нет

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

К флекс-элементу

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

Нет

Объект JavaScript:

object.style.alignSelf

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

CSS Flexible Box Layout Module

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

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

Синтаксис

/* Keyword values */ 
align-self: auto; 
align-self: normal; 

/* Positional alignment */ 
align-self: center; /* Put the item around the center */ 
align-self: start; /* Put the item at the start */ 
align-self: end; /* Put the item at the end */ 
align-self: self-start; /* Align the item flush at the start */ 
align-self: self-end; /* Align the item flush at the end */ 
align-self: flex-start; /* Put the flex item at the start */ 
align-self: flex-end; /* Put the flex item at the end */ 
align-self: left; /* Put the item at the left */ 
align-self: right; /* Put the item at the right */ 

/* Baseline alignment */ 
align-self: baseline; 
align-self: first baseline; 
align-self: last baseline; 
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */ 

/* Overflow alignment */ 
align-self: safe center; 
align-self: unsafe center; 

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

Значения

auto - Берёт родительское значение align-items или stretch, если нет родителя.
flex-start - Элемент выравнивается в начале поперечной оси контейнера.
flex-end - Элемент выравнивается в конце поперечной оси контейнера.
center - Элемент выравнивается по центральной линии на поперечной оси.
baseline - Элемент выравнивается по базовой линии текста.
stretch - Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Примеры

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>align-items</title>
        <style>
            .flex-container {
                display: flex;
                align-items: flex-start;
                height: 160px; /* Высота контейнера */
            }
            .flex-item {
                margin-left: 1rem; /* Расстояние между блоками */
                padding: 10px; /* Поля вокруг текста */
                width: 33.333%; /* Ширина блоков */
            }
            .flex-item:first-child { margin-left: 0; }
            .flex-item:hover { 
                align-self: stretch; /* Растягиваем при наведении */
            }
            .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-self.

В начало

align-self CSS