CSS свойство align-selfcss3

CSS свойства

Определение и применение

CSS свойство align-selfcss3 задает выравнивание отдельных элементов внутри флекс контейнера (свойство переопределяет значение выравнивания, заданного для контейнера свойством align-itemscss3 конкретному элементу).


Если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство align-selfcss3 не окажет на такой элемент никакого эффекта.


Обращаю Ваше внимание, что если для флекс элемента установлено свойство margin(внешние отступы) со значением auto, то свойство align-self будет игнорировано.

Схематичное отображение работы свойства align-selfcss3 отображено на следующем изображении:

Схематичное отображение работы CSS свойства align-self

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
align-selfcss321.020.012.19.0
7.0
-webkit-
11.012.0

CSS синтаксис:

align-self: "auto | stretch | center | flex-start | flex-end | baseline | initial | inherit";

JavaScript синтаксис:

object.style.alignSelf = "auto"

Значения свойства

ЗначениеОписание
autoФлекс элемент наследует значение его родительского контейнера. Если он не имеет родительского контейнера, то значение, устанавливается, как stretch. Это значение по умолчанию.
stretchФлекс элемент растягивается по размеру контейнера вдоль поперечной оси.
centerФлекс элемент располагается по центру контейнера (середина поперечной оси).
flex-startФлекс элемент располагается в начале контейнера (начало поперечной оси).
flex-endФлекс элемент располагается в конце контейнера (конец поперечной оси).
baselineФлекс элемент распологаются по его базовой линии.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства align-self</title>
<style>
.container {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
height: 300px;  /* устанавливаем высоту контейнера */
background: bisque;  /* устанавливаем цвет заднего фона */
-webkit-align-items: center;  /* для поддержки ранних версий браузеров */
align-items: center;  /* флекс элементы располагаются по центру контейнера (середина поперечной оси) */
}
.container > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь флекс контейнера  )
width: 20%; /* устанавливаем ширину блока */
} 
.container div:nth-of-type(1) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере) */ 
background : orange; /* устанавливаем цвет заднего фона */
-webkit-align-self: auto;  /* для поддержки ранних версий браузеров */
align-self: auto;  /* флекс элемент наследует значение его родительского контейнера(center) */
} 
.container div:nth-of-type(2) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере) */ 
background : tan; /* устанавливаем цвет заднего фона */
-webkit-align-self: stretch;  /* для поддержки ранних версий браузеров */
align-self: stretch;  /* флекс элемент растягивается по размеру контейнера вдоль поперечной оси */
} 
.container div:nth-of-type(3) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере) */ 
background : yellow; /* устанавливаем цвет заднего фона */
-webkit-align-self: flex-start;  /* для поддержки ранних версий браузеров */
align-self: flex-start;  /* флекс элемент располагается в начале контейнера (начало поперечной оси) */
} 
.container div:nth-of-type(4) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем четвертый <div> в контейнере) */ 
background : thistle; /* устанавливаем цвет заднего фона */
-webkit-align-self: flex-end;  /* для поддержки ранних версий браузеров */
align-self: flex-end;  /* флекс элемент располагается в конце контейнера (конец поперечной оси) */
} 
.container div:nth-of-type(5) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем пятый <div> в контейнере) */ 
background : lime; /* устанавливаем цвет заднего фона */
-webkit-align-self: baseline;  /* для поддержки ранних версий браузеров */
align-self: baseline;  /* флекс элемент распологаются по его базовой линии */
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>auto(наследует center)</div>
			<div>stretch</div>
			<div>flex-start</div>
			<div>flex-end</div>
			<div>baseline</div>
		</div>
	</body>
</html>
Пример использования свойства align-self(задает выравнивание выделенных элементов внутри флекс контейнера).
Пример использования свойства align-self(задает выравнивание выделенных элементов внутри флекс контейнера).
CSS свойства