Свойство align-self
Описание
Используется для выравнивания флекс - элементов текущей строки. Аналог align-items, отличие в том что он применяется для отдельных элементов flexbox / grid.
Синтаксис
align-self: auto | flex-start | flex-end | center | baseline | stretch;Подробности
| Значение | Описание |
| flex-start | Строки располагаются в начале поперечной оси. |
| center | Строки располагаются по центру контейнера. |
| flex-end | Строки располагаются начиная с конца поперечной оси. |
| stretch | Растягивается, занимая все свободное пространство по поперечной оси. |
| auto | Берёт родительское значение align-items или stretch, если родителя нет. Используется по умолчанию. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.blue{
width: 100%;
height: 300px;
padding: 5px;
background-color: lightblue;
display: flex;
align-self: stretch;
flex-wrap: wrap;
}
#pink{
width: 70px;
height: auto;
background-color: pink;
margin: 5px;
}
</style>
<div class='blue'>
<div id='pink'></div>
<div id='pink'></div>
<div id='pink'></div>
<div id='pink'></div>
</div>
</body>
</html>Читайте также
Свойство border-bottom-color
Устанавливает цвет нижней границы элемента....
Свойство box-shadow
Добавляет тень к элементу.
Разрешено использовать несколько теней, указывая их через запятую....
Свойство margin
Устанавливает величину отступа от границы текущего элемента до внутренней границы его родительского элемента....
Свойство order
Определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных...