CSS Flexbox - flex-flow Property
CSS flex-flow is a shorthand property that determines the direction of a flex container and the wrapping behavior of its content.
This property enables flex items to wrap onto multiple lines in a horizontal row when they exceed the container's width.
The flex-flow property is a shorthand for the following CSS properties:
Possible Values
-
row − The flex items are displayed in a horizontal direction from left to right.
-
row-reverse − The flex items are displayed in a horizontal direction but in reverse order from right to left.
-
column − The flex items are displayed in a vertical direction from top to bottom.
-
column-reverse − The flex items are displayed in a vertical direction but in reverse order from bottom to top.
-
nowrap − The flex items should not wrap or break into the next line.
-
wrap − The flex item should wrap to the next line.
-
wrap-reverse − The flex items should wrap to the next line in reverse order.
Applies to
Flex containers.
Syntax
<flex-direction>
flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse;
<flex-wrap>
flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse;
<flex-direction> and <flex-wrap>
flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse;
CSS flex-flow - row Value
The following example demonstrates use of flex-flow: row property. The flex items display in a horizontal direction −
<html> <head> <style> .flex-container { display: flex; flex-flow: row; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> <div>Flex item 8</div> </div> </body> </html>
CSS flex-flow - row-reverse Value
The following example demonstrates that the flex-flow: row property arranges flex items in a horizontal direction from right to left −
<html> <head> <style> .flex-container { display: flex; flex-flow: row-reverse; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> <div>Flex item 8</div> </div> </body> </html>
CSS flex-flow - column Value
The following example demonstrates that the flex-flow: column property arranges flex items in a vertical direction −
<html> <head> <style> .flex-container { display: flex; flex-flow: column; background-color: green; width: 100%; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS flex-flow - column-reverse Value
The following example demonstrates that the flex-flow: column property arranges flex items in a vertical direction but displays in a reverse order from bottom to top −
<html> <head> <style> .flex-container { display: flex; flex-flow: column-reverse; background-color: green; width: 100%; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS flex-flow - nowrap Value
The following example demonstrates that flex-flow: nowrap property prevents the flex items from wrapping to the next line −
<html> <head> <style> .flex-container { display: flex; flex-flow: nowrap; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <h4>As you resize the browser window the flex items are displayed in a single row without wrapping.</h4> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> </div> </body> </html>
CSS flex-flow - wrap Value
The following example demonstrates use of flex-flow: wrap property. Here the flex items wraps to the next line −
<html> <head> <style> .flex-container { display: flex; flex-flow: wrap; background-color: green; width: 100%; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <h4>As you rsize the browser window the flex items should be wrap to the next line.</h4> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html>
CSS flex-flow - wrap-reverse Value
The following example demonstrates use of flex-flow: wrap-reverse property. Here the flex items wraps to the next line in reverse order −
<html> <head> <style> .flex-container { display: flex; flex-flow: wrap-reverse; background-color: green; width: 100%; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <h4>As you rsize the browser window the flex items should be wrap to the next line in reverse order.</h4> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html>
CSS flex-flow - row wrap Value
The following example demonstrates that flex-flow: row wrap property arranges the flex items in a row and wraps to the next line −
<html> <head> <style> .flex-container { display: flex; flex-flow: row wrap; background-color: green; width: 100%; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <h4>As you rsize the browser window the flex items should be wrap to the next line.</h4> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google