HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> h2+div{ display: flex; width: 100%; min-height: 250px; border: 1px solid #8c8c8c; } h2+div > div{ width: 90px; height: 90px; border: 1px solid #8c8c8c; margin: 10px; } #parent{ flex-flow: row nowrap; } #parent1{ flex-flow: row wrap; } #parent2{ flex-flow: row wrap-reverse; } #parent3{ flex-flow: row-reverse nowrap; } #parent4{ flex-flow: row-reverse wrap; } #parent5{ flex-flow: row-reverse wrap-reverse; } #parent6{ flex-flow: column nowrap; } #parent7{ flex-flow: column wrap; } #parent8{ flex-flow: column wrap-reverse; } #parent9{ flex-flow: column-reverse nowrap; } #parent10{ flex-flow: column-reverse wrap; } #parent11{ flex-flow: column-reverse wrap-reverse; } </style> </head> <body> <h1>CSS flex-flow Property</h1> <p><strong>Note</strong>: Try to resize width and height of this output window.</p> <h2>flex-flow: row nowrap; (default)</h2> <div id="parent"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: row wrap;</h2> <div id="parent1"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: row wrap-reverse;</h2> <div id="parent2"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: row-reverse nowrap;</h2> <div id="parent3"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: row-reverse wrap;</h2> <div id="parent4"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: row-reverse wrap-reverse;</h2> <div id="parent5"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: column nowrap;</h2> <div id="parent6"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: column wrap;</h2> <div id="parent7"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: column wrap-reverse;</h2> <div id="parent8"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: column-reverse nowrap;</h2> <div id="parent9"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: column-reverse wrap;</h2> <div id="parent10"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <h2>flex-flow: column-reverse wrap-reverse;</h2> <div id="parent11"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> </body> </html>
OUTPUT
×

Save as Private