Xüsusiyyət justify-content

justify-content xüsusiyyəti flex konteynerləri üçün əsas ox, qridlər üçün isə üfüqi ox boyunca elementlərin düzləndirilməsini təyin edir. Ana elementə tətbiq edilir.

Sintaksis

selektor {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Dəyərlər

Dəyər	Təsvir
`flex-start`	Bloklar əsas (üfüqi) oxun əvvəlinə sıxılır.
`flex-end`	Bloklar əsas (üfüqi) oxun sonuna sıxılır.
`center`	Bloklar əsas (üfüqi) oxun mərkəzində yerləşir.
`space-between`	Bloklar əsas (üfüqi) ox boyunca bərabər paylanır, ilk element oxun əvvəlinə, sonuncu element isə oxun sonuna sıxılır.
`space-around`	Bloklar əsas (üfüqi) ox boyunca paylanır, ilk blokla oxun əvvəli arasında, sonuncu blokla oxun sonu arasında qalan bloklar arasındakı kimi eyni məsafə qoyulur. Lakin, göründüyü kimi bərabər deyillər: boşluqlar toplanır və iki blok arasında blokla oxun əvvəli/sonu arasındakı məsafədən iki dəfə çox olur.

Susmaya görə dəyər: flex-start.

Nümunə . Flex-start dəyəri

Hal-hazırda ox soldan sağa yönəlib (bunu flex-direction: row edir), bloklar isə sol tərəfə sıxılıb:

<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;
}

Nümunə . Flex-end dəyəri

Bu nümunədə ox eyni şəkildə soldan sağa yönəlib, lakin bloklar sağ tərəfə sıxılıb, çünki justify-content xüsusiyyəti flex-end dəyərində təyin edilib:

<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;
}

Nümunə . Center dəyəri

Hal-hazırda bloklar əsas oxun istiqamətindən asılı olmayaraq mərkəzdə yerləşəcək:

<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;
}

Nümunə . Space-between dəyəri

Bloklar əsas ox boyunca bərabər paylanır, ilk element oxun əvvəlinə, sonuncu element isə oxun sonuna sıxılır:

<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;
}

Nümunə . Space-around dəyəri

Bloklar əsas ox boyunca paylanır, ilk blokla oxun əvvəli arasında, sonuncu blokla oxun sonu arasında qalan bloklar arasındakı kimi eyni məsafə qoyulur. Lakin, boşluqlar toplanır və iki blok arasındakı məsafə blokla oxun əvvəli/sonu arasındakı məsafədən iki dəfə çox olur:

<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;
}

Nümunə . Center dəyəri. Ox aşağı

flex-direction xüsusiyyətini column dəyərinə təyin edərək əsas oxun istiqamətini dəyişək:

<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;
}

Nümunə . Space-between dəyəri. Ox aşağı

Hal-hazırda bloklar şaquli olaraq bərabər paylanacaq:

<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;
}

Nümunə . Qriddə üfüqi oxun əvvəlinə düzləndirmə

Elementlərimiz üçün üfüqi oxun əvvəlinə düzləndirmə təyin edək:

<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;
}

Nümunə . Qriddə üfüqi oxun mərkəzinə düzləndirmə

İndi isə elementlərimiz üçün üfüqi oxun mərkəzinə düzləndirmə təyin edək:

<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;
}

Nümunə . Qriddə üfüqi oxun sonuna düzləndirmə

Elementlərimiz üçün üfüqi oxun sonuna düzləndirmə təyin edək:

<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;
}

Həmçinin bax

flex-direction xüsusiyyəti,
flex bloklarında oxların istiqamətini təyin edir
align-items xüsusiyyəti,
kəsişən ox üzrə düzləndirməni təyin edir
flex-wrap xüsusiyyəti,
flex bloklarının çoxsətirliliyini təyin edir
flex-flow xüsusiyyəti,
flex-direction və flex-wrap üçün qısaldılmış yazılış
order xüsusiyyəti,
flex bloklarının sırasını təyin edir
align-self xüsusiyyəti,
tək bir blokun düzləndirilməsini təyin edir
flex-basis xüsusiyyəti,
konkret flex blokunun ölçüsünü təyin edir
flex-grow xüsusiyyəti,
flex bloklarının böyümə əmsalını təyin edir
flex-shrink xüsusiyyəti,
flex bloklarının kiçilmə əmsalını təyin edir
flex xüsusiyyəti,
flex-grow, flex-shrink və flex-basis üçün qısaldılmış yazılış