A flex-wrap tulajdonság

A flex-wrap tulajdonság a többsoros elrendezést határozza meg a főtengely mentén. A flex elemek szülő elemére vonatkozik. Része a flex-flow rövidített tulajdonságnak.

Szintaxis

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

Értékek

Érték	Leírás
`nowrap`	Egsoros mód - az elemek egyetlen sorba rendeződnek.
`wrap`	Az elemek több sorba rendeződnek, ha nem férnek el egy sorban.
`wrap-reverse`	Ugyanaz, mint a `wrap`, de az elemek fordított sorrendben rendeződnek (először az utolsó, majd az első).

Alapértelmezett érték: nowrap.

Példa . wrap érték

Most az elemek nem férnek el a tárolójukban és több sorba fognak rendeződni:

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

Példa . wrap-reverse érték

És most a sorrend fordított lesz (nezd meg a számokat az elemeken belül):

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

Példa . nowrap érték

Most az elemek egysoros módban fognak elhelyezkedni (így van alapértelmezetten). Ebben az esetben az elemek width szélességi értéke figyelmen kívül lesz hagyva, ha az megakadályozza, hogy az elemek a szülőbe férjenek. Figyeld meg, hogy az elemek elfértek a szülőben, de a valódi szélességük nem 100px, ahogy meg van adva, hanem kisebb:

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

Példa . nowrap érték

Azonban, ha az elemek a megadott szélesség mellett is elférnek - akkor a width tulajdonság nem lesz figyelmen kívül hagyva. Csökkentsük az elemek számát úgy, hogy mind beférjenek:

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

Lásd még

a flex-direction tulajdonság,
amely a flex elemek tengelyeinek irányát határozza meg
a justify-content tulajdonság,
amely a főtengely mentén történő igazítást határozza meg
a align-items tulajdonság,
amely a kereszttengely mentén történő igazítást határozza meg
a flex-flow tulajdonság,
rövidítés a flex-direction és flex-wrap számára
a order tulajdonság,
amely a flex elemek sorrendjét határozza meg
a align-self tulajdonság,
amely egy elem igazítását határozza meg
a flex-basis tulajdonság,
amely egy adott flex elem méretét határozza meg
a flex-grow tulajdonság,
amely a flex elemek "növekedési tényezőjét" határozza meg
a flex-shrink tulajdonság,
amely a flex elemek zsugorodását határozza meg
a flex tulajdonság,
rövidítés a flex-grow, flex-shrink és flex-basis számára