Уласцівасць align-items

Уласцівасць align-items задае выраўноўванне элементаў уздоўж папярочнай восі для flex блокаў і па вертыкальнай восі для грыдаў. Ужываецца да бацькоўскага элемента.

Сінтаксіс

селектар {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

Значэнні

Значэнне	Апісанне
`flex-start`	Блокі прыціснуты да пачатку папярочнай (вертыкальнай) восі.
`flex-end`	Блокі прыціснуты да канца папярочнай (вертыкальнай) восі.
`center`	Блокі стаяць па цэнтры папярочнай (вертыкальнай) восі.
`baseline`	Элементы выраўноўваюцца па сваёй базавай лініі. Базавая лінія (англ. baseline, або лінія шрыфту) - гэта ўяўная лінія, якая праходзіць па ніжнім краі сімвалаў без уліку звісанняў, напрыклад, як у літар `'ц'`, `'д'`, `'р'`, `'щ'`.
`stretch`	Блокі расцягнуты, займаюць усё даступнае месца па папярочнай восі, пры гэтым усё ж улічваюцца `min-width` і `max-width`, калі яны зададзены. Калі ж зададзены шырыня і вышыня для элементаў - `stretch` будзе праігнараваны.

Значэнне па змаўчанні: stretch.

Прыклад . Значэнне stretch

Зараз галоўная вось накіравана злева направа, а па папярочнай восі элементы расцягнуты на ўсю вышыню:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Прыклад . Значэнне stretch + памеры элемента

Зараз для элементаў зададзены шырыня і вышыня, таму значэнне stretch для ўласцівасці align-items будзе праігнаравана:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Прыклад . Значэнне flex-start без памераў элемента

Зараз элементы будуць прыціснуты да верху:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Прыклад . Значэнне flex-start + памеры элемента

Зараз элементы па-ранейшаму будуць прыціснуты да верху, аднак у іх будзе зададзеная шырыня і вышыня:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Прыклад . Значэнне flex-end + памеры элемента

Зараз элементы будуць прыціснуты да нізу:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Прыклад . Значэнне center + памеры элемента

Зараз элементы будуць стаяць па цэнтры па папярочнай восі (у дадзеным выпадку па вертыкалі):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Прыклад . Значэнне center, элементы рознага памеру

Зараз элементы маюць розны памер па вышыні (зараз яны разсоўваюцца тэкстам, але можна задаць і height), шырыня ў усіх аднолькавая, бо зададзена ўласцівасць width:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Прыклад . Значэнне baseline, элементы рознага памеру

А вось так выглядае выраўноўванне па базавай лініі:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Прыклад . Выраўноўванне па пачатку вертыкальнай восі ў грыдзе

Давайце выраўнуем нашы элементы ўнутры ячэек па пачатку вертыкальнай восі:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

А цяпер паглядзім на наш грыд у адладчыку браўзера:

Прыклад . Выраўноўванне па цэнтры вертыкальнай восі ў грыдзе

А цяпер выраўнуем нашы элементы ў ячэйках па цэнтры вертыкальнай восі:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Давайце паглядзім на адлюстраванне грыда ў адладчыку:

Прыклад . Выраўноўванне па канцы вертыкальнай восі ў грыдзе

Зноўку зменім выраўноўванне элементаў, на гэты раз па канцы вертыкальнай восі:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	
}

А цяпер паглядзім як выглядае наш грыд праз адладчык:

Глядзіце таксама

уласцівасць flex-direction,
якое задае кірунак восей flex блокаў
уласцівасць justify-content,
якое задае выраўноўванне па галоўнай восі
уласцівасць align-items,
якое задае выраўноўванне па папярочнай восі
уласцівасць flex-wrap,
якое шматрадковасць flex блокаў
уласцівасць flex-flow,
скарачэнне для flex-direction і flex-wrap
уласцівасць order,
якое задае парадак flex блокаў
уласцівасць align-self,
якое задае выраўноўванне аднаго блока
уласцівасць flex-basis,
якое задае памер канкрэтнага flex блока
уласцівасць flex-grow,
якое задае прагнасць flex блокаў
уласцівасць flex-shrink,
якое задае сціскальнасць flex блокаў
уласцівасць flex,
скарачэнне для flex-grow, flex-shrink і flex-basis