Justify-content сипаттамасы

justify-content сипаттамасы flex блоктар үшін негізгі ось бойынша және grid үшін көлденең ось бойынша элементтердің туралауын белгілейді. Ата-ана элементке қолданылады.

Синтаксис

селектор {
	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;
}

Мысал . Көлденең осьтің басы бойынша туралау (жолдар) grid-те

Элементтеріміздің көлденең осьтің басы бойынша туралауын орнатайық:

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

Мысал . Көлденең осьтің ортасы бойынша туралау grid-те

Енді элементтеріміздің көлденең осьтің ортасы бойынша туралауын орнатайық:

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

Мысал . Көлденең осьтің соңы бойынша туралау grid-те

Элементтеріміздің көлденең осьтің соңы бойынша туралауын орнатайық:

<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 үшін қысқарту