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>

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

Свойство counter-increment

Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.

Применяется совместно с псевдоэле...

Селекторы атрибутов со значениями через пробел

Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения тре...

Стиль посещенных ссылок

Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление....

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа....