Vlastnost flex-flow je zkratkou pro vlastnosti flex-direction a flex-wrap. Lze tak pomocí jedné vlastnosti zapsat dvě vlastnosti najednou a ušetřit množství přenášených dat. Vlastnost má efekt pouze na dceřinné elementy elementu s display nastaveným na flex nebo inline-flex.
| Hodnoty vstupů | Popis |
|---|---|
| flex-direction flex-wrap | Směr zobrazování textu (viz flex-direction) následovaný vypnutím/zapnutím zalamování textu (viz flex-wrap) |
| initial | Nastaví hodnotu na defaultní |
| inherit | Dědí hodnotu od mateřského elementu |
/* CSS pro lepší čitelnost ukázky */div div {width: 50%;font-size: 150%;border: 1px solid #FF0000;text-align: center;box-sizing: border-box;}/* Dceřinné flexibilní elementy se zarovnají do řádku a zalomí */#flex-row-wrap {display: flex;flex-flow: row wrap;}/* Dceřinné flexibilní elementy se zarovnají do řádku v opačném pořadí a nebudou se zalamovat */#flex-row-reverse-nowrap {display: flex;flex-flow: row-reverse nowrap;}/* Dceřinné flexibilní elementy se zarovnají do řádku v opačném pořadí a budou se zalamovat v opačném pořadí */#flex-row-reverse-wrap-reverse {display: flex;flex-flow: row-reverse wrap-reverse;}
Dceřinné flexibilní elementy se zarovnají do řádku a zalomí:<div id="flex-row-wrap"><div>1</div><div>2</div><div>3</div><div>4</div></div><br/>Dceřinné flexibilní elementy se zarovnají do řádku v opačném pořadí a nebudou se zalamovat:<div id="flex-row-reverse-nowrap"><div>1</div><div>2</div><div>3</div><div>4</div></div><br/>Dceřinné flexibilní elementy se zarovnají do řádku v opačném pořadí a budou se zalamovat v opačném pořadí:<div id="flex-row-reverse-wrap-reverse"><div>1</div><div>2</div><div>3</div><div>4</div></div>
Výsledek:
