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

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

Свойство accent-color

Свойство accent-color определяет цвет акцента для некоторых элементов формы. Акцентом в данном сл...

Свойство min-height

Устанавливает минимальную высоту элемента.<br><br>Значение высоты элемента будет вычи...

Родственные селекторы

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в ...

Свойство backface-visibility

Определяет, показывать обратную сторону элемента или нет. Как правило, обратная сторона становитс...

Правило @keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства...