Свойство 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>

Читайте также

Свойство text-stroke-color

Устанавливает цвет контура вокруг букв и символов текста.

Свойство justify-content

Определяет, как браузер распределяет пространство вокруг флекс - элементов вдоль главной оси конт...

Свойство tab-size

Свойство tab-size используется для настройки ширины символа табуляции (U+0009).

Свойство border-bottom-width

Устанавливает толщину границы внизу элемента.

Свойство font-stretch

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расшир...