CSS стиль align-items
CSS стиль align-items выравнивает flex-элементы внутри контейнера в перпендикулярном направлении.
Safari до 9й версии поддерживает свойство -webkit-align-items.
Краткая информация по CSS-свойству align-items
Значение по умолчанию | stretch |
Наследуется | Нет |
Применяется | К flex-контейнеру |
Анимируется | Нет |
Правила написания свойства align-items
align-items: свойство
Поясним значения свойств:
Объектная модель
Объект.style.alignItems
Пример применения стиля align-items
Проиллюстрируем работу align-items на примере. Использование align-items: stretch
позволяет сделать блоки одинаковыми по высоте, несмотря на разное содержимое:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример с align-items</title>
<style>
.flex-container {
display: flex;
align-items: stretch; /* Растягиваем */
}
.flex-item {
margin-left: 10px; /* Расстояние между блоками */
padding: 10px; /* Поля вокруг текста */
width: 33.333%; /* Ширина блоков */
}
.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>