Justify-content xususiyati

justify-content xususiyati flex-bloklar uchun asosiy o‘q bo‘yicha va gridlar uchun gorizontal o‘q bo‘yicha elementlarning joylashuvini belgilaydi. Ota elementga qo‘llaniladi.

Sintaksis

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

Qiymatlar

Qiymat	Tavsif
`flex-start`	Bloklar asosiy (gorizontal) o‘qning boshiga joylashgan.
`flex-end`	Bloklar asosiy (gorizontal) o‘qning oxiriga joylashgan.
`center`	Bloklar asosiy (gorizontal) o‘qning markazida joylashgan.
`space-between`	Bloklar asosiy (gorizontal) o‘q bo‘ylab taqsimlangan, bunda birinchi element o‘qning boshiga, oxirgisi esa o‘qning oxiriga joylashgan.
`space-around`	Bloklar asosiy (gorizontal) o‘q bo‘ylab taqsimlangan, bunda birinchi blok va o‘qning boshlanishi o‘rtasida, oxirgi blok va o‘qning oxiri o‘rtasida boshqa bloklar o‘rtasidagi bilan bir xil interval mavjud. Biroq, ular ko‘rinadigandek teng emas: intervaller yig‘iladi va ikkita blok o‘rtasidagi masofa blok va o‘qning boshi/oxiri o‘rtasidagidan ikki baravar ko‘p.

Standart qiymat: flex-start.

Misol . Flex-start qiymati

Hozir o‘q chapdan o‘ngga yo‘nalgan (buni flex-direction: row amalga oshiradi), bloklar chap tomonga joylashgan:

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

Misol . Flex-end qiymati

Ushbu misolda o‘q ham chapdan o‘ngga yo‘nalgan, lekin bloklar o‘ng tomonga joylashgan, chunki justify-content xususiyati flex-end qiymatiga ega:

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

Misol . Center qiymati

Hozir bloklar asosiy o‘qning yo‘nalishidan qat'iy nazar markazda joylashadi:

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

Misol . Space-between qiymati

Bloklar asosiy o‘q bo‘ylab taqsimlangan, bunda birinchi element o‘qning boshiga, oxirgisi esa o‘qning oxiriga joylashgan:

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

Misol . Space-around qiymati

Bloklar asosiy o‘q bo‘ylab taqsimlangan, bunda birinchi blok va o‘qning boshlanishi, oxirgi blok va o‘qning oxiri o‘rtasida boshqa bloklar o‘rtasidagi bilan bir xil interval mavjud. Biroq, intervallar yig‘iladi va ikkita blok o‘rtasidagi masofa blok va o‘qning boshi/oxiri o‘rtasidagidan ikki baravar ko‘p:

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

Misol . Center qiymati. O‘q pastga

Asosiy o‘qning yo‘nalishini flex-direction xususiyatini column qiymatiga o‘zgartirib o‘zgartiramiz:

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

Misol . Space-between qiymati. O‘q pastga

Hozir bloklar vertikal bo‘ylab bir xil tarqaladi:

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

Misol . Gorizontal o‘qning boshiga joylashtirish (qatorlar) gridda

Keling, elementlarimizning gorizontal o‘qning boshiga joylashishini o‘rnatamiz:

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

Misol . Gorizontal o‘qning markaziga joylashtirish gridda

Endi esa elementlarimizning gorizontal o‘qning markaziga joylashishini o‘rnatamiz:

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

Misol . Gorizontal o‘qning oxiriga joylashtirish gridda

Keling, elementlarimizning gorizontal o‘qning oxiriga joylashishini o‘rnatamiz:

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

Shuningdek qarang

flex-direction xususiyati,
bu flex-bloklarning o‘qlar yo‘nalishini belgilaydi
align-items xususiyati,
bu kesishuvchi o‘q bo‘yicha joylashuvni belgilaydi
flex-wrap xususiyati,
bu flex-bloklarning ko‘p qatorliligini belgilaydi
flex-flow xususiyati,
flex-direction va flex-wrap uchun qisqartma
order xususiyati,
bu flex-bloklarning tartibini belgilaydi
align-self xususiyati,
bu bitta blokning joylashuvini belgilaydi
flex-basis xususiyati,
bu ma'lum bir flex-blokning o‘lchamini belgilaydi
flex-grow xususiyati,
bu flex-bloklarning "ochko‘zligini" belgilaydi
flex-shrink xususiyati,
bu flex-bloklarning siqiluvchanligini belgilaydi
flex xususiyati,
flex-grow, flex-shrink va flex-basis uchun qisqartma