Flex-wrap hassaýy

flex-wrap hassaýy baş ok boýunça köp setirli bloklary ýerleşdirmek üçin ulanylýar. Flex bloklar üçin ata elementine goýulýar. Gysgaldylan hassaýa flex-flow degişlidir.

Sintaksis

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

Görnüşleri

Görnüşi	Düşündirişi
`nowrap`	Bir setirli tertip - bloklar bir hatarda düzülýär.
`wrap`	Bloklar bir hatara syğmaýan bolsa, birnäçe hatara düzülýär.
`wrap-reverse`	`wrap` bilen birmeňzeş, ýöne bloklar başga tertipde düzülýär (ilki iň soňky, soňra birinji).

Bellenen görnüşi: nowrap.

Mysal . Wrap görnüşi

Häzir bloklar konteýnerlerine syğmaýar we birnäçe hatara düzüler:

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

Mysal . Wrap-reverse görnüşi

Indi ýerleşiş tertibi tersine üýtgär (bloklaryň içindäki sanlara serediň):

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

Mysal . Nowrap görnüşi

Häzir bloklar bir setirli tertipde ýerleşer (bellenen ýaly). Bu ýagdaýda bloklar üçin berlen width giňişlik görkezijesi, eger bloklaryň atada ýerleşmegine päsgel berýän bolsa, ünsden düşüriler. Bloklaryň atada ýerleşýändigine, ýöne olaryň hakyky giňişliginiň berlen 100px däl-de, kiçidigine üns beriň:

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

Mysal . Nowrap görnüşi

Emma, eger bloklar berlen giňişlikde ýerleşýän bolsa - onda width hassaýy ünsden düşürilmez. Bloklaryň hemmesi syğar ýaly azaldyň:

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

Şeýle-de serediň

flex-direction hassaýy,
flex bloklaryň ok ugruny kesgitleýär
justify-content hassaýy,
baş ok boýunça deňleşdirmäni kesgitleýär
align-items hassaýy,
çalsy ok boýunça deňleşdirmäni kesgitleýär
flex-flow hassaýy,
flex-direction we flex-wrap üçin gysgaldylan görnüş
order hassaýy,
flex bloklaryň tertibini kesgitleýär
align-self hassaýy,
bir bloky deňleşdirmek üçin ulanylýar
flex-basis hassaýy,
kesgitli bir flex blokyň ölçegini kesgitleýär
flex-grow hassaýy,
flex bloklaryň uly bolmak islegini kesgitleýär
flex-shrink hassaýy,
flex bloklaryň kiçelmek ukybyny kesgitleýär
flex hassaýy,
flex-grow, flex-shrink we flex-basis üçin gysgaldylan görnüş