Flex-direction xususiyati

flex-direction xususiyati asosiy va ko'ndalang o'qning yo'nalishini belgilaydi yoki, boshqacha qilib aytganda, elementlarni qator yoki ustun shaklida joylashtiradi.

Flex bloklar uchun ota-elementga qo'llaniladi. flex-flow qisqartirilgan xususiyatning tarkibiy qismidir.

Sintaksis

selector {
	flex-direction: row | row-reverse | column | column-reverse;
}

Qiymatlar

Qiymat	Tavsif
`row`	Asosiy o'q chapdan o'ngga yo'nalgan. Elementlar qator bo'lib joylashgan, standart holatda chap chetga yopishgan, ularning tartibi odatiy ketma-ketlikda - chapdan o'ngga.
`row-reverse`	Asosiy o'q o'ngdan chapga yo'nalgan. Elementlar qator bo'lib joylashgan, standart holatda o'ng chetga yopishgan, ularning tartibi teskari ketma-ketlikda - o'ngdan chapga.
`column`	Asosiy o'q yuqoridan pastga yo'nalgan. Elementlar ustun bo'lib joylashgan, standart holatda yuqori chetga yopishgan, ularning tartibi odatiy ketma-ketlikda - yuqoridan pastga.
`column-reverse`	Asosiy o'q pastdan yuqoriga yo'nalgan. Elementlar ustun bo'lib joylashgan, standart holatda pastki chetga yopishgan, ularning tartibi teskari ketma-ketlikda - pastdan yuqoriga.

Standart qiymat: row.

Misol

Elementlar qator bo'lib joylashgan, standart holatda chap chetga yopishgan, ularning tartibi odatiy ketma-ketlikda - chapdan o'ngga:

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

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

Misol . Row-reverse qiymati

Elementlar qator bo'lib joylashgan, standart holatda o'ng chetga yopishgan, ularning tartibi teskari ketma-ketlikda - o'ngdan chapga:

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

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

Misol . Column qiymati

Elementlar ustun bo'lib joylashgan, standart holatda yuqori chetga yopishgan, ularning tartibi odatiy ketma-ketlikda - yuqoridan pastga:

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

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

Misol . Column-reverse qiymati

Elementlar ustun bo'lib joylashgan, standart holatda pastki chetga yopishgan, ularning tartibi teskari ketma-ketlikda - pastdan yuqoriga:

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

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

Shuningdek qarang

justify-content xususiyati,
asosiy o'q bo'yicha tekislashni belgilaydi
align-items xususiyati,
ko'ndalang o'q bo'yicha tekislashni belgilaydi
flex-wrap xususiyati,
flex bloklarning ko'qatorliligini belgilaydi
flex-flow xususiyati,
flex-direction va flex-wrap uchun qisqartma
order xususiyati,
flex bloklarning tartibini belgilaydi
align-self xususiyati,
bitta blokning tekislanishini belgilaydi
flex-basis xususiyati,
ma'lum bir flex blokning o'lchamini belgilaydi
flex-grow xususiyati,
flex bloklarning "ochko'zligini" belgilaydi
flex-shrink xususiyati,
flex bloklarning siqiluvchanligini belgilaydi
flex xususiyati,
flex-grow, flex-shrink va flex-basis uchun qisqartma