Właściwość flex-wrap

Właściwość flex-wrap ustawia wielowierszowe rozmieszczenie bloków wzdłuż osi głównej. Stosuje się do elementu nadrzędnego dla bloków flex. Wchodzi w skład właściwości-skrótu flex-flow.

Składnia

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

Wartości

Wartość	Opis
`nowrap`	Tryb jednowierszowy - bloki ustawiają się w jednym wierszu.
`wrap`	Bloki ustawiają się w wielu wierszach, jeśli nie mieszczą się w jednym.
`wrap-reverse`	To samo, co `wrap`, ale bloki ustawiają się w odwrotnej kolejności (najpierw ostatni, potem pierwszy).

Wartość domyślna: nowrap.

Przykład . Wartość wrap

Teraz bloki nie mieszczą się w swoim kontenerze i ustawią się w kilku wierszach:

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

Przykład . Wartość wrap-reverse

A teraz kolejność następowania zmieni się na odwrotną (patrzcie na cyfry wewnątrz bloków):

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

Przykład . Wartość nowrap

Teraz bloki będą rozmieszczone w trybie jednowierszowym (tak domyślnie). Przy tym wartość szerokości width dla bloków będzie zignorowana, jeśli przeszkadza blokom zmieścić się w rodzicu. Zwróćcie uwagę na to, że bloki zmieściły się w rodzicu, ale ich rzeczywista szerokość to nie 100px, jak im zadano, a mniej:

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

Przykład . Wartość nowrap

Jednakże, jeśli bloki mieszczą się przy zadanej im szerokości - to właściwość width nie będzie zignorowana. Zmniejszmy ilość bloków tak, żeby wszystkie się zmieściły:

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

Zobacz też

właściwość flex-direction,
która ustawia kierunek osi bloków flex
właściwość justify-content,
która ustawia wyrównanie wzdłuż osi głównej
właściwość align-items,
która ustawia wyrównanie wzdłuż osi poprzecznej
właściwość flex-flow,
skrót dla flex-direction i flex-wrap
właściwość order,
która ustawia kolejność bloków flex
właściwość align-self,
która ustawia wyrównanie jednego bloku
właściwość flex-basis,
która ustawia rozmiar konkretnego bloku flex
właściwość flex-grow,
która ustawia "zachłanność" bloków flex
właściwość flex-shrink,
która ustawia skalowalność bloków flex
właściwość flex,
skrót dla flex-grow, flex-shrink i flex-basis