CSS стиль align-self
CSS свойство align-self, выравнивает flex-элементы текущей строки, заменяя значение align-items.
Safari до 9й версии поддерживает свойство -webkit-align-self.
Краткая информация по CSS-свойству align-self
Значение по умолчанию | stretch |
Наследуется | Нет |
Применяется | К flex-контейнеру |
Анимируется | Нет |
Правила написания свойства align-self
align-self: auto | flex-start | flex-end |
center | baseline | stretch
Объектная модель
Объект.style.alignSelf
Пример применения стиля align-self
Проиллюстрируем работу align-self на примере. Будем растягивать наши блоки при наведении на них курсора мыши:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример с align-self</title>
<style>
.flex-container {
display: flex;
align-items: flex-start;
height: 160px; /* Высота контейнера */
}
.flex-item {
margin-left: 1rem; /* Расстояние между блоками */
padding: 10px; /* Поля вокруг текста */
width: 33.333%; /* Ширина блоков */
}
.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">
Есть ли какие нибудь JS библиотеки которые помогут IE 9 и
более поздним версиям понять это свойство Flexbox?
</div>
<div class="flex-item item2">
Решил использовать flexbox в проектах.
</div>
<div class="flex-item item3">
На самом деле это всего лишь малая часть того,
что можно реализовать на FlexBox.
</div>
</div>
</body>
</html>