CSS :: Свойство align-self
http://belarusweb.net
Основы создания сайтов

CSS :: Свойство align-self

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

Следует отметить, что если будут заданы значения внешних отступов margin в направлении поперечной оси, то свойство align-self будет игнорироваться.

Характеристики

  • Значение по умолчанию: auto.
  • Применяется: к флекс-элементам.
  • Наследуется: нет.
  • Анимируется: нет.
  • JavaScript: object.style.alignSelf="value".

Синтаксис

align-self: auto | flex-start | flex-end | center | baseline | stretch

Значения

  • auto – используется значение свойства align-items для родительского флекс-контейнера или значение stretch, если родителя нет;
  • flex-start – флекс-элементы выравниваются в начале поперечной оси флекс-контейнера;
  • flex-end – флекс-элементы выравниваются в конце поперечной оси флекс-контейнера;
  • center – флекс-элементы выравниваются по линии поперечной оси флекс-контейнера;
  • baseline – флекс-элементы выравниваются по их базовой линии;
  • stretch – флекс-элементы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		/* Оформляем родительские div'ы flex-элементов */
		div{
		display: flex;
		width: 600px;
		height: 100px;
		margin: auto;
		margin-top: 10px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль flex-элементов */		
		p{
		width: 40px;
		height: 40px;
		padding: 10px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Выравнивание всех флекс-элементов */	
		.div_flex{
		align-items: center;
		}
				
	</style>
	
</head>
<body>
	
	<!-- Выравнивание без переопределения -->
	<div class="div_flex">
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</div>

	<!-- Используем для 2-х элементов align-self -->
	<div class="div_flex">
		<p style="align-self: flex-start">1</p>
		<p>2</p>
		<p style="align-self: flex-end">3</p>
	</div>

</body>
</html>

Пример №1