Vlastnost flex-flow

Vlastnost flex-flow je zkratka pro flex-direction a flex-wrap. Výchozí hodnota: row nowrap. Aplikuje se na nadřazený prvek flex kontejnerů.

Syntaxe

selektor {
	flex-flow: smer_hlavni_osi viceradkovani;
}

Pořadí hodnot není důležité.

Příklad

V tomto příkladu se bloky nevejdou do svého kontejneru a seřadí se do více řádků:

<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říklad

Změňme směr hlavní osy (column místo row):

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

Viz také

vlastnost flex-direction,
která nastavuje směr os flex kontejnerů
vlastnost justify-content,
která nastavuje zarovnání podél hlavní osy
vlastnost align-items,
která nastavuje zarovnání podél příčné osy
vlastnost flex-wrap,
která nastavuje vícerádkování flex kontejnerů
vlastnost order,
která nastavuje pořadí flex položek
vlastnost align-self,
která nastavuje zarovnání jedné položky
vlastnost flex-basis,
která nastavuje velikost konkrétní flex položky
vlastnost flex-grow,
která nastavuje schopnost růstu flex položek
vlastnost flex-shrink,
která nastavuje smrštitelnost flex položek
vlastnost flex,
zkratka pro flex-grow, flex-shrink a flex-basis