Flex-wrap xususiyati

flex-wrap xususiyati asosiy o‘q bo‘yicha ko‘p qatorli bloklar joylashuvini belgilaydi. Flex bloklar uchun ota elementga qo‘llaniladi. flex-flow qisqartirilgan xususiyatiga kiradi.

Sintaksis

selector {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Qiymatlar

Qiymat	Tavsif
`nowrap`	Bir qatorli rejim - bloklar bitta qatorda joylashadi.
`wrap`	Bloklar bitta qatorga sig‘masa, bir nechta qatorlarda joylashadi.
`wrap-reverse`	`wrap` bilan bir xil, lekin bloklar boshqa tartibda joylashadi (avval oxirgisi, keyin birinchi).

Standart qiymat: nowrap.

Misol . Wrap qiymati

Hozir bloklar o‘z konteyneriga sig‘maydi va bir nechta qatorlarda joylashadi:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Misol . Wrap-reverse qiymati

Endi ketma-ketlik teskari tomonga o‘zgaradi (bloklar ichidagi raqamlarga qarang):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap-reverse;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Misol . Nowrap qiymati

Hozir bloklar bir qatorli rejimda joylashadi (standart holatda). Bunda bloklar uchun width kenglik qiymati e'tiborga olinmaydi, agar u bloklarning ota elementga sig‘ishiga xalaqit bersa. E'tibor bering, bloklar ota elementga sig‘di, lekin ularning haqiqiy kengligi 100px emas, ularga belgilanganidek, balki undan kamroq:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Misol . Nowrap qiymati

Biroq, agar bloklar ularga belgilangan kenglikda sig‘sa - width xususiyati e'tiborga olinmaydi. Bloklar sonini kamaytiramiz, ularning hammasi sig‘adigan qilib:

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

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Shuningdek qarang

flex-direction xususiyati,
bu flex bloklar o‘qlarining yo‘nalishini belgilaydi
justify-content xususiyati,
bu asosiy o‘q bo‘yicha joylashtirishni belgilaydi
align-items xususiyati,
bu o‘tmas o‘q bo‘yicha joylashtirishni 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