A flex-flow tulajdonság

A flex-flow tulajdonság egy rövidítés a flex-direction és a flex-wrap számára. Alapértelmezett érték: row nowrap. A flex konténerek szülő elemére alkalmazható.

Szintaxis

selector {
	flex-flow: fő_tengely_iránya több_soros;
}

Az értékek sorrendje nem számít.

Példa

Ebben a példában a blokkok nem férnek el a konténerükben és több sorba rendeződnek:

<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-flow: row wrap;
	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

Változtassuk meg a fő tengely irányát (column a row helyett):

<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 {
	flex-flow: column wrap;
	justify-content: space-between;
	display: flex;
	height: 200px;
	width: 330px;
	margin: auto;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Lásd még

a flex-direction tulajdonság,
amely a flex blokkok tengelyirá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 keresztirányú tengely mentén történő igazítást határozza meg
a flex-wrap tulajdonság,
amely a flex blokkok több sorosságát határozza meg
a order tulajdonság,
amely a flex blokkok sorrendjét határozza meg
a align-self tulajdonság,
amely egyetlen blokk igazítását határozza meg
a flex-basis tulajdonság,
amely egy adott flex blokk méretét határozza meg
a flex-grow tulajdonság,
amely a flex blokkok növekedési faktorát határozza meg
a flex-shrink tulajdonság,
amely a flex blokkok zsugorodási faktorát határozza meg
a flex tulajdonság,
rövidítés a flex-grow, flex-shrink és flex-basis számára