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

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

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

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

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

Синтаксис

align-items: flex-start | flex-end | center | baseline | stretch

Значения

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

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-flexbox/#propdef-align-items

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/align-items

Подробнее о модуле Flexbox смотрите в нашем учебнике здесь.

Примеры

HTML Результат

htmlCodes

<!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, span{
		width: 40px;
		height: 40px;
		padding: 10px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс для 1-го div'а */	
		.div_flex_1{
		align-items: flex-start;
		}
		
		/* Это класс для 2-го div'а */	
		.div_flex_2{
		align-items: flex-end;
		}
		
		/* Это класс для 3-го div'а */	
		.div_flex_3{
		align-items: center;
		}
				
		/* Это класс для флексов 3-го div'а */	
		.div_flex_3 p, .div_flex_3 span{
		margin-left: 40px;
		}
		
		/* Это класс для 4-го div'а */	
		.div_flex_4{
		align-items: baseline;
		}
				
		/* Это класс для 5-го div'а */	
		.div_flex_5{
		align-items: stretch;
		}
				
	</style>
	
</head>
<body>

	<div class="div_flex_1">
		<p>1</p><span>2</span><p>3</p>
	</div>

	<div class="div_flex_2">
		<p>1</p><span>2</span><p>3</p>
	</div>	
	
	<div class="div_flex_3">
		<p>1</p><span>2</span><p>3</p>
	</div>

	<div class="div_flex_4">
		<p>1</p><span>2</span><p>3</p>
	</div>

	<div class="div_flex_5">
		<p>1</p><span>2</span><p>3</p>
	</div>	

</body>
</html>

Пример №1