Svojstvo flex-wrap

Svojstvo flex-wrap postavlja višelinijsko raspoređivanje blokova duž glavne ose. Primenjuje se na roditeljski element za flex blokove. Deo je skraćenog svojstva flex-flow.

Sintaksa

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

Vrednosti

Vrednost	Opis
`nowrap`	Jednolinijski režim - blokovi se raspoređuju u jedan red.
`wrap`	Blokovi se raspoređuju u više redova, ako ne stanu u jedan.
`wrap-reverse`	Isto što i `wrap`, ali se blokovi raspoređuju obrnutim redosledom (prvo poslednji, pa prvi).

Podrazumevana vrednost: nowrap.

Primer . Vrednost wrap

Sada blokovi ne stanu u svoj kontejner i rasporediće se u nekoliko redova:

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

Primer . Vrednost wrap-reverse

A sada će se redosled menjati na obrnut (pogledajte brojeve unutar blokova):

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

Primer . Vrednost nowrap

Sada će se blokovi rasporediti u jednolinijskom režimu (tako je podrazumevano). Pritom će vrednost širine width za blokove biti zanemarena, ako sprečava blokove da stanu u roditelja. Obratite pažnju da blokovi jesu smestili u roditelja, ali njihova stvarna širina nije 100px, kao što im je zadato, već manja:

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

Primer . Vrednost nowrap

Međutim, ako blokovi stanu sa zadatom im širinom - onda svojstvo width neće biti zanemareno. Smanjićemo broj blokova tako da svi stanu:

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

Pogledajte takođe

svojstvo flex-direction,
koje postavlja smer osa flex blokova
svojstvo justify-content,
koje postavlja poravnanje duž glavne ose
svojstvo align-items,
koje postavlja poravnanje duž poprečne ose
svojstvo flex-flow,
skraćenica za flex-direction i flex-wrap
svojstvo order,
koje postavlja redosled flex blokova
svojstvo align-self,
koje postavlja poravnanje jednog bloka
svojstvo flex-basis,
koje postavlja veličinu određenog flex bloka
svojstvo flex-grow,
koje postavlja "pohlepu" flex blokova
svojstvo flex-shrink,
koje postavlja skupljanje flex blokova
svojstvo flex,
skraćenica za flex-grow, flex-shrink i flex-basis