CSS flex-flow

Previous Next

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

Click the property values below to see the result:

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 ❯