User Avatar

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

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

Свойство animation

Используется для создания анимации.
Сокращенная запись для свойств animation-name, animation-duration, animation-timing-function, animation-delay, ...

Свойство font-family

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

Список шрифтов может включать одно или нескольк...

Свойство flex

Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство. Элементы могут быть растянуты...

Свойство writing-mode

Устанавливает направление текста на странице — по горизонтали или вертикали....