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

CSS свойства

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

CSS свойство align-items определяет выравнивание элементов внутри флекс контейнера вдоль поперечной оси.

Действие свойства align-items похоже на свойство justify-contentcss3, но в отличие от этого свойства выравнивание происходит не по главной оси, а вдоль поперечной оси (перпендикулярно главной оси).

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

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

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

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

CSS синтаксис:

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

JavaScript синтаксис:

object.style.alignItems = "stretch"

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

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства align-items</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:hover {  /* стили при наведении на контейнер */
-webkit-align-items: center;  /* для поддержки ранних версий браузеров */
align-items: center;  /* флекс элементы распологаются по их базовой линии */
} 
.container div:nth-of-type(1) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере) */ 
background : orange; /* устанавливаем цвет заднего фона */
height : 50px; /* устанавливаем высоту блока */
font-size : 20px; /* устанавливаем размер шрифта */
} 
.container div:nth-of-type(2) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере) */ 
background : tan; /* устанавливаем цвет заднего фона */
height : 150px; /* устанавливаем высоту блока */
font-size : 18px; /* устанавливаем размер шрифта */
} 
.container div:nth-of-type(3) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере) */ 
background : yellow; /* устанавливаем цвет заднего фона */
height : 80px; /* устанавливаем высоту блока */
font-size : 12px; /* устанавливаем размер шрифта */
} 
.container div:nth-of-type(4) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем четвертый <div> в контейнере) */ 
background : blue; /* устанавливаем цвет заднего фона */
height : 25px; /* устанавливаем высоту блока */
font-size : 10px; /* устанавливаем размер шрифта */
} 
.container div:nth-of-type(5) { /* псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем пятый <div> в контейнере) */ 
background : lime; /* устанавливаем цвет заднего фона */
height : 90px; /* устанавливаем высоту блока */
font-size : 40px; /* устанавливаем размер шрифта */
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>1. Text</div>
			<div>2. Text</div>
			<div>3. Text</div>
			<div>4. Text</div>
			<div>5. Text</div>
		</div>
	</body>
</html>
Пример использования свойства align-items(определяет выравнивание элементов внутри флекс контейнера вдоль поперечной оси).
Пример использования свойства align-items(определяет выравнивание элементов внутри флекс контейнера вдоль поперечной оси).
CSS свойства