Flex-wrap xassəsi

flex-wrap xassəsi blokların əsas ox üzrə çoxsətirli yerləşdirilməsini təyin edir. Flex blokların valideyn elementinə tətbiq edilir. flex-flow qısaldılmış xassəsinin tərkib hissəsidir.

Sintaksis

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

Qiymətlər

Qiymət	Təsvir
`nowrap`	Təksətirli rejim - bloklar bir sətirdə yerləşir.
`wrap`	Bloklar bir sətirdə sığmazsa, bir neçə sətirdə yerləşir.
`wrap-reverse`	`wrap` ilə eynidir, lakin bloklar əks qaydada (yəni əvvəl sonuncu, sonra birinci) yerləşir.

Susmaya görə qiymət: nowrap.

Nümunə . Wrap qiyməti

Hal-hazırda bloklar konteynerə sığmır və bir neçə sətirdə yerləşəcək:

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

Nümunə . Wrap-reverse qiyməti

İndi isə ardıcıllıq əksinə dəyişəcək (blokların içindəki rəqəmlərə baxın):

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

Nümunə . Nowrap qiyməti

Hal-hazırda bloklar təksətirli rejimdə (susmaya görə belə) yerləşəcək. Bu zaman bloklar üçün width genişlik qiyməti, əgər blokların valideynə sığmasına mane olursa, nəzərə alınmır. Diqqət edin ki, bloklar valideynə sığır, lakin onların həqiqi genişliyi 100px deyil, onlara təyin edildiyi kimi, daha azdır:

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

Nümunə . Nowrap qiyməti

Lakin, əgər bloklar təyin edilmiş genişlikdə sığırlarsa, onda width xassəsi nəzərə alınmır. Blokların sayını onların hamısının sığacağı şəkildə azaldaq:

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

Həmçinin bax

flex-direction xassəsi,
flex blokların oxlarının istiqamətini təyin edir
justify-content xassəsi,
əsas ox üzrə düzləndirməni təyin edir
align-items xassəsi,
kəsişən ox üzrə düzləndirməni təyin edir
flex-flow xassəsi,
flex-direction və flex-wrap üçün qısaldılmadır
order xassəsi,
flex blokların sırasını təyin edir
align-self xassəsi,
bir blokun düzləndirilməsini təyin edir
flex-basis xassəsi,
konkret flex blokunun ölçüsünü təyin edir
flex-grow xassəsi,
flex blokların "acgözlüyünü" təyin edir
flex-shrink xassəsi,
flex blokların sıxılmasını təyin edir
flex xassəsi,
flex-grow, flex-shrink və flex-basis üçün qısaldılmadır