Свойство 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 блокларнинг кўп қatorлилигини белгилайди
свойство flex-flow,
flex-direction ва flex-wrap учун қисқартма
свойство order,
бу flex блокларнинг тартибини белгилайди
свойство align-self,
бу бир блокни текислашни белгилайди
свойство flex-basis,
бу аник flex блокнинг ўлчамини белгилайди
свойство flex-grow,
бу flex блокларнинг ochko'zligini белгилайди
свойство flex-shrink,
бу flex блокларнинг қисқариш имкониятини белгилайди
свойство flex,
flex-grow, flex-shrink ва flex-basis учун қисқартма