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