Omadus flex-flow
Omadus flex-flow on lühend
omaduste flex-direction
ja flex-wrap jaoks.
Vaikeväärtus: row nowrap.
Rakendatakse vanemaelemendile
flex-konteinerite jaoks.
Süntaks
valija {
flex-flow: peatelje_suund mitmerealisus;
}
Väärtuste järjekord ei ole oluline.
Näide
Selles näites ei mahu konteinerisse kõik elemendid ja nad paigutatakse mitmele reale:
<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;
}
:
Näide
Muudame peatelje suunda (column rea asemel):
<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;
}
:
Vaata ka
-
omadus
flex-direction,
määrab flex-elementide telgede suuna -
omadus
justify-content,
määrab joonduse põhitelje suunas -
omadus
align-items,
määrab joonduse risttelje suunas -
omadus
flex-wrap,
määrab flex-elementide mitmerealisuse -
omadus
order,
määrab flex-elementide järjestuse -
omadus
align-self,
määrab üksiku elemendi joonduse -
omadus
flex-basis,
määrab konkreetse flex-elemendi algse suuruse -
omadus
flex-grow,
määrab flex-elementide "ahneuse" (kasvumäära) -
omadus
flex-shrink,
määrab flex-elementide kokkutõmbumise -
omadus
flex,
lühend omadustele flex-grow, flex-shrink ja flex-basis