Vetia flex-wrap

Vetia flex-wrap përcakton rregullimin shumë-rreshtor të blloqeve përgjatë boshtit kryesor. Aplikohet në elementin prind për blloqet flex. Bëjnë pjesë në vetinë e shkurtuar flex-flow.

Sintaksa

përzgjedhësi {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Vlerat

Vlera	Përshkrimi
`nowrap`	Modalitet një-rreshtor - blloqet rreshtohen në një rresht.
`wrap`	Blloqet rreshtohen në disa rreshta, nëse nuk futen në një.
`wrap-reverse`	E njëjta gjë si `wrap`, por blloqet rreshtohen në rend tjetër (së pari i fundit, pastaj i pari).

Vlera e paracaktuar: nowrap.

Shembull . Vlera wrap

Tani blloqet nuk futen në kontejnerin e tyre dhe do të rreshtohen në disa rreshta:

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

Shembull . Vlera wrap-reverse

Dhe tani rendi i ndjekjes do të ndryshojë në të kundërtën (shikoni numrat brenda blloqeve):

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

Shembull . Vlera nowrap

Tani blloqet do të vendosen në modalitet një-rreshtor (kështu si parazgjedhje). Në këtë rast vlera e gjerësisë width për blloqe do të injorohet, nëse i pengon blloqet të futen në prind. Kushtojini vëmendje faktit që blloqet kanë hyrë në prind, por gjerësia e tyre reale nuk është 100px, siç u është caktuar, por më pak:

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

Shembull . Vlera nowrap

Megjithatë, nëse blloqet futen me gjerësinë e caktuar atyre - atëherë vetia width nuk do të injorohet. Le të zvogëlojmë sasinë e blloqeve në mënyrë që të gjitha të hyjnë:

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

Shihni gjithashtu

vetia flex-direction,
e cila përcakton drejtimin e boshteve të blloqeve flex
vetia justify-content,
e cila përcakton rreshtimin përgjatë boshtit kryesor
vetia align-items,
e cila përcakton rreshtimin përgjatë boshtit tërthor
vetia flex-flow,
shkurtim për flex-direction dhe flex-wrap
vetia order,
e cila përcakton rendin e blloqeve flex
vetia align-self,
e cila përcakton rreshtimin e një blloku
vetia flex-basis,
e cila përcakton madhësinë e një blloku specifik flex
vetia flex-grow,
e cila përcakton lakminë e blloqeve flex
vetia flex-shrink,
e cila përcakton tkurrshmërinë e blloqeve flex
vetia flex,
shkurtim për flex-grow, flex-shrink dhe flex-basis