CSS flex-flow Property

You are Here:

CSS flex-flow Property

CSS flex-flow property is a shorthand property of the following properties.

Example

HTML Online 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; } </style> </head> <body> <h1>CSS flex-flow Property</h1> <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> </body> </html>

Syntax

Using CSS

element{ flex-flow: row wrap; }

Using Javascript

object.style.flexFlow="row wrap";

Animatable

No, flex-flow property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS flex-flow property is row nowrap.

Property Value

The following table provides a list of values for CSS flex-flow property.

ValueExplanation
row nowrapThe flex items are displayed horizontally, as a row in same order without wrapping.
row wrapThe flex items are displayed horizontally, as a row in same order with wrapping, if necessary.
row wrap-reverseThe flex items are displayed horizontally, as a row in same order with reverse wrapping, if necessary.
row-reverse nowrapThe flex items are displayed horizontally, as a row in reverse order without wrapping.
row-reverse wrapThe flex items are displayed horizontally, as a row in reverse order with wrapping, if necessary.
row-reverse wrap-reverseThe flex items are displayed horizontally, as a row in reverse order with reverse wrapping, if necessary.
column nowrapThe flex items are displayed vertically, as a column in same order without wrapping.
column wrapThe flex items are displayed vertically, as a column in same order with wrapping, if necessary.
column wrap-reverseThe flex items are displayed vertically, as a column in same order with reverse wrapping, if necessary.
column-reverse nowrapThe flex items are displayed vertically, as a column in reverse order without wrapping.
column-reverse wrapThe flex items are displayed vertically, as a column in reverse order with wrapping, if necessary.
column-reverse wrap-reverseThe flex items are displayed vertically, as a column in reverse order with reverse wrapping, if necessary.

Using JavaScript

In the following example, we will demonstrate how to change the CSS flex-flow property of an element using JavaScript.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #parent{ display: flex; width: 100%; min-height: 250px; border: 1px solid #8c8c8c; } #parent > div{ width: 90px; height: 90px; border: 1px solid #8c8c8c; margin: 10px; } </style> </head> <body> <h1>CSS flex-flow Property</h1> <div id="parent"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("parent"); function myFunction(){ x.style.flexFlow = "column wrap-reverse"; } </script> </body> </html>

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author