Vlastnost flex slouží jako zkratka pro udání hodnot flex-grow, flex-shrink a flex-basis. Určuje tedy zemnšování, růst a šířku flexibilního elementu. Vlastnost má efekt pouze na dceřinné prvky elementu s display vlastností nastavenou na flex nebo inline-flex.
| Hodnoty vstupů | Popis |
|---|---|
| flex-grow flex-shrink flex-basis | Hodnoty specifikující flex-grow, flex-shrink a flex-basis. Více informací o těchto hodnotách naleznete v jednotlivých podkategoriích webu. |
| auto | Identické jako hodnota 1 1 auto |
| none | Identické jako hodnota 0 0 auto |
| initial | Nastaví hodnotu na defaultní (0 1 auto) |
| inherit | Dědí hodnotu od mateřského elementu |
/* CSS pro lepší čitelnost ukázky */div div {font-size: 150%;border: 1px solid #FF0000;text-align: center;}/* Flexbox s vlastností flex nastavenou na none */#flexbox1 {display: flex;}#flexbox1 > div {flex: none;}/* Flexbox s vlastností flex nastavenou na auto */#flexbox2 {display: flex;}#flexbox2 > div {flex: auto;}/* Flexbox s vlastností flex nastavenou na 0 1 15% */#flexbox3 {display: flex;}#flexbox3 > div {flex: 0 1 15%;}
Flexbox s vlastností flex nastavenou na none:<div id="flexbox1"><div>První div</div><div>Druhý div</div><div>Třetí div</div><div>Čtvrtý div</div><div>Pátý div</div></div><br/>Flexbox s vlastností flex nastavenou na auto:<div id="flexbox2"><div>První div</div><div>Druhý div</div><div>Třetí div</div><div>Čtvrtý div</div><div>Pátý div</div></div><br/>Flexbox s vlastností flex nastavenou na 0 1 15%:<div id="flexbox3"><div>První div</div><div>Druhý div</div><div>Třetí div</div><div>Čtvrtý div</div><div>Pátý div</div></div>
Výsledek:
