Flex-wrap-ominaisuus

Ominaisuus flex-wrap määrittää lohkojen monirivisen sijoittamisen pääakselia pitkin. Sitä sovelletaan flex-lohkojen yläelementtiin. Se kuuluu lyhennettyyn ominaisuuteen flex-flow.

Syntaksi

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

Arvot

Arvo	Kuvaus
`nowrap`	Yksirivinen tila - lohkot asettuvat yhdelle riville.
`wrap`	Lohkot asettuvat usealle riville, jos ne eivät mahdu yhdelle riville.
`wrap-reverse`	Sama kuin `wrap`, mutta lohkot asettuvat käänteisessä järjestyksessä (ensin viimeinen, sitten ensimmäinen).

Oletusarvo: nowrap.

Esimerkki . Wrap-arvo

Nyt lohkot eivät mahdu säiliöönsä ja asettuvat usealle riville:

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

Esimerkki . Wrap-reverse-arvo

Nyt järjestys muuttuu päinvastaiseksi (katso lohkojen sisällä olevia numeroita):

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

Esimerkki . Nowrap-arvo

Nyt lohkot sijoitetaan yksirivisessä tilassa (niin kuin oletusarvoisesti). Tällöin lohkoille asetettu leveysarvo width jätetään huomiotta, jos se estää lohkoja mahtumasta yläelementtiin. Huomaa, että lohkot mahtuvat yläelementtiin, mutta niiden todellinen leveys ei ole 100px, kuten niille on asetettu, vaan pienempi:

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

Esimerkki . Nowrap-arvo

Kuitenkin, jos lohkot mahtuvat asetetulla leveydellään - ominaisuutta width ei jätetä huomiotta. Vähennetään lohkojen määrää niin, että ne kaikki mahtuvat:

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

Katso myös

ominaisuus flex-direction,
joka määrittää flex-lohkojen akselien suunnan
ominaisuus justify-content,
joka määrittää tasauksen pääakselia pitkin
ominaisuus align-items,
joka määrittää tasauksen poikittaistakselia pitkin
ominaisuus flex-flow,
lyhenne flex-directionille ja flex-wraplle
ominaisuus order,
joka määrittää flex-lohkojen järjestyksen
ominaisuus align-self,
joka määrittää yhden lohkon tasauksen
ominaisuus flex-basis,
joka määrittää tietyn flex-lohkon koon
ominaisuus flex-grow,
joka määrittää flex-lohkojen "ahneuden"
ominaisuus flex-shrink,
joka määrittää flex-lohkojen kutistuvuuden
ominaisuus flex,
lyhenne flex-growille, flex-shrinkille ja flex-basisille