CSS flex-flow

Previous Next

Demo of the different values of the flex-flow property.

To stop the demo, click one of the possible values.

flex-flow: row nowrap;
flex-flow: row-reverse nowrap;
flex-flow: column nowrap;
flex-flow: column-reverse nowrap;
flex-flow: row wrap;
flex-flow: row-reverse wrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap;
flex-flow: row wrap-reverse;
flex-flow: row-reverse wrap-reverse;
flex-flow: column wrap-reverse;
flex-flow: column-reverse wrap-reverse;



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div



red div
blue div
yellow div
pink div

Play more with the code in our Tryit yourself editor: Try it Yourself ❯