Уласцівасць justify-content

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

Сінтаксіс

селектар {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Значэнні

Значэнне	Апісанне
`flex-start`	Блокі прыціснуты да пачатку галоўнай (гарызантальнай) восі.
`flex-end`	Блокі прыціснуты да канца галоўнай (гарызантальнай) восі.
`center`	Блокі стаяць па цэнтры галоўнай (гарызантальнай) восі.
`space-between`	Блокі размеркаваны ўздоўж галоўнай (гарызантальнай) восі, пры гэтым першы элемент прыціснуты да пачатку восі, а апошні - да канца.
`space-around`	Блокі размеркаваны ўздоўж галоўнай (гарызантальнай) восі, пры гэтым паміж першым блокам і пачаткам восі, апошнім блокам і канцом восі такі ж прамежак, як і паміж астатнімі блокамі. Аднак, яны не роўныя, як магло здацца: прамежкі сумуюцца і паміж двума блокамі адлегласць у два разы большая, чым паміж блокам і пачаткам/канцом восі.

Значэнне па змаўчанні: flex-start.

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

Зараз вось накіравана злева направа (гэта робіць flex-direction: row), а блокі прыціснуты да левага боку:

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

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

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

У гэтым прыкладзе вось таксама накіравана злева направа, але блокі прыціснуты да правага боку, бо зададзена justify-content у значэнні flex-end:

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

#parent {
	display: flex;
	justify-content: 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;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Прыклад . Значэнне space-between

Блокі размеркаваны ўздоўж галоўнай восі, пры гэтым першы элемент прыціснуты да пачатку восі, а апошні - да канца:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Прыклад . Значэнне space-around

Блокі размеркаваны ўздоўж галоўнай восі, пры гэтым паміж першым блокам і пачаткам восі, апошнім блокам і канцом восі такі ж прамежак, як і паміж астатнімі блокамі. Аднак, прамежкі сумуюцца і паміж двума блокамі адлегласць у два разы большая, чым паміж блокам і пачаткам/канцом восі:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Прыклад . Значэнне center. Вось уніз

Зменім напрамак галоўнай восі, задаўшы flex-direction у значэнні column:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Прыклад . Значэнне space-between. Вось уніз

Зараз блокі размеркуюцца раўнамерна па вертыкалі:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	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;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

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

уласцівасць flex-direction,
якое задае напрамак восей flex-блокаў
уласцівасць 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