CSS - flex-flow Property
CSS flex-flow is a shorthand property for defining the values of properties flex-direction and flex-wrap which determine the direction of a flex container and the wrapping behavior of its content respectively in one single statement. The elements must be flexible in order for the property to show its effect.
Syntax
flex-flow: flex-direction flex-wrap | initial | inherit;
Property Values
| Value | Description |
|---|---|
| flex-direction | It specifies the direction of the flexible item. Possible values are: row, row-reverse, column, column-reverse, initial and inherit. Default is row. |
| flex-wrap | It specifies whether the flexible item should wrap or not. Possible values are: nowrap, wrap, wrap-reverse, initial and inherit |
| initial | This sets the property to its default value. |
| inherit | This inherits the property from the parent element. |
Examples of CSS Flex Flow Property
The following examples explain the flex-flow property with different values.
Flex Flow Property with Row Direction
To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes either single value or two values. In the following example, two values have been used flex-direction: row and flex-wrap: nowrap, wrap and wrap-reverse.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: lightgray;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #4CAF50;
color: white;
border: 1px solid black;
padding: 10px;
margin: 5px;
flex: 0 0 100px;
}
.container1 {
display: flex;
flex-flow: row nowrap;
width: 400px;
}
.container2 {
display: flex;
flex-flow: row wrap;
width: 300px;
}
.container3 {
display: flex;
flex-flow: row wrap-reverse;
width: 300px;
}
</style>
</head>
<body>
<h2>
CSS flex-flow Property
</h2>
<p>
<strong>
Flex Flow: row nowrap
</strong>
-Items are arranged in a row and do not wrap, causing
horizontal overflow if the items exceed the container's
width.
</p>
<div class="container container1">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: row wrap
</strong>
- Items are arranged in a row and wrap onto
the next line if there isn't enough space
in the container.
</p>
<div class="container container2">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: row wrap-reverse
</strong>
- Items are arranged in a row and wrap onto the next
line in reverse order if there isn't enough space in
the container.
</p>
<div class="container container3">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
</body>
</html>
Flex Flow Property with Row Reverse Direction
To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes either single value or two values. In the following example, two values have been used flex-direction: row-reverse and flex-wrap: nowrap, wrap and wrap-reverse.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: lightgray;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #4CAF50;
color: white;
border: 1px solid black;
padding: 10px;
margin: 5px;
flex: 0 0 100px;
}
.container1 {
display: flex;
flex-flow: row-reverse nowrap;
width: 400px;
margin-left: auto;
}
.container2 {
display: flex;
flex-flow: row-reverse wrap;
width: 300px;
}
.container3 {
display: flex;
flex-flow: row-reverse wrap-reverse;
width: 300px;
}
</style>
</head>
<body>
<h2>
CSS flex-flow property
</h2>
<p>
<strong>
Flex Flow: row-reverse nowrap
</strong>
- Items are arranged in a row in reverse order and
do not wrap, causing horizontal overflow if the
items exceed the container's width.
</p>
<div class="container container1">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: row-reverse wrap
</strong>
- Items are arranged in a row in reverse order
and wrap onto the next line if there isn't
enough space in the container.
</p>
<div class="container container2">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: row-reverse wrap-reverse
</strong>
- Items are arranged in a row in reverse order
and wrap onto the next line in reverse order
if there isn't enough space in the container.
</p>
<div class="container container3">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
</body>
</html>
Flex Flow Property with Column Direction
To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes either single value or two values. In the following example, two values have been used flex-direction: column and flex-wrap: nowrap, wrap and wrap-reverse.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: lightgray;
padding: 10px;
margin-bottom: 20px;
width: 300px;
height: 400px;
overflow: auto;
}
.item {
background-color: #4CAF50;
color: white;
border: 1px solid black;
padding: 10px;
margin: 5px;
flex: 0 0 100px;
}
.container1 {
display: flex;
flex-flow: column nowrap;
}
.container2 {
display: flex;
flex-flow: column wrap;
}
.container3 {
display: flex;
flex-flow: column wrap-reverse;
}
</style>
</head>
<body>
<h2>
CSS flex-flow property
</h2>
<p>
<strong>
Flex Flow: column nowrap
</strong>
- Items are arranged in a vertical column and do
not wrap. Vertical scrolling will occur if the
items exceed the container's height.
</p>
<div class="container container1">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: column wrap
</strong>
- Items are arranged in a vertical column and
wrap onto the next line when there isn't enough
space in the container.
</p>
<div class="container container2">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
<div class="item">
Item 6
</div>
<div class="item">
Item 7
</div>
</div>
<p>
<strong>
Flex Flow: column wrap-reverse
</strong>
- Items are arranged in a vertical column and wrap
onto the next line in reverse order when there
isn't enough space in the container.
</p>
<div class="container container3">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
<div class="item">
Item 6
</div>
<div class="item">
Item 7
</div>
</div>
</body>
</html>
Flex Flow Property with Column Reverse Direction
To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes either single value or two values. In the following example, two values have been used flex-direction: column-reverse and flex-wrap: nowrap, wrap and wrap-reverse.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: lightgray;
padding: 10px;
margin-bottom: 20px;
width: 300px;
height: 400px;
overflow: auto;
}
.item {
background-color: #4CAF50;
color: white;
border: 1px solid black;
padding: 10px;
margin: 5px;
flex: 0 0 100px;
}
.container1 {
display: flex;
flex-flow: column-reverse nowrap;
}
.container2 {
display: flex;
flex-flow: column-reverse wrap;
}
.container3 {
display: flex;
flex-flow: column-reverse wrap-reverse;
}
</style>
</head>
<body>
<h2>
CSS Flex Flow Property with column-reverse
</h2>
<p>
<strong>
Flex Flow: column-reverse nowrap
</strong>
- Items are arranged in a vertical column in reverse
order and do not wrap. Vertical scrolling will occur
if the items exceed the container's height.
</p>
<div class="container container1">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: column-reverse wrap
</strong>
- Items are arranged in a vertical column in reverse
order and wrap onto the next column when there isn't
enough vertical space in the container.
</p>
<div class="container container2">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
<div class="item">
Item 6
</div>
<div class="item">
Item 7
</div>
</div>
<p>
<strong>
Flex Flow: column-reverse wrap-reverse
</strong>
- Items are arranged in a vertical column in reverse
order and wrap onto the next column in reverse order
when there isn't enough vertical space in the container.
</p>
<div class="container container3">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
<div class="item">
Item 6
</div>
<div class="item">
Item 7
</div>
</div>
</body>
</html>
Flex Flow Property with only Flex Direction Values
To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes upto two value. If single value is given the other value is the default value of the property. In the following example, single values have been used flex-direction: row and flex-direction: row-reverse, the flex-wrap takes the default "nowrap" value in both the cases.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
width: 50%;
}
.item {
background-color: #4CAF50;
color: white;
border: 1px solid black;
padding: 10px;
margin: 5px;
flex: 0 0 100px;
}
.container1 {
display: flex;
flex-flow: row;
}
.container2 {
margin-left: auto;
display: flex;
flex-flow: row-reverse;
}
</style>
</head>
<body>
<h2>
CSS flex-flow property
</h2>
<p>
<strong>
Flex Flow: row (nowrap)
</strong>
- Items are arranged in a horizontal row from left
to right and do not wrap. Horizontal scrolling will
occur if the items exceed the container's width.
</p>
<div class="container container1">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: row-reverse (nowrap)
</strong>
- Items are arranged in a horizontal row in reverse
order from right to left and do not wrap. Horizontal
scrolling will occur if the items exceed the
container's width.
</p>
<div class="container container2">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
</body>
</html>
Flex Flow Property with only Flex Direction Values
To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes upto two value. If single value is given the other value is the default value of the property. In the following example, single values have been used flex-direction: column and flex-direction: column-reverse, the flex-wrap takes the default "nowrap" value in both the cases.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: lightgray;
padding: 10px;
margin-bottom: 20px;
width: 50%;
}
.item {
background-color: #4CAF50;
color: white;
border: 1px solid black;
padding: 10px;
margin: 5px;
flex: 0 0 100px;
}
.container1 {
display: flex;
flex-flow: column;
}
.container2 {
display: flex;
flex-flow: column-reverse;
}
</style>
</head>
<body>
<h2>
CSS flex-flow property
</h2>
<p>
<strong>
Flex Flow: row (nowrap)
</strong>
- Items are arranged in a vertical column from
top to bottom and do not wrap.
</p>
<div class="container container1">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: row-reverse (nowrap)
</strong>
- Items are arranged in a vertical column in reverse
order from bottom to top and do not wrap.
</p>
<div class="container container2">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
</body>
</html>
Flex Flow Property with only Flex Wrap Values
To set the direction and wrap of the element in single statement, we use the flex-flow property. It takes upto two value. If single value is given the other value is the default value of the property. In the following example, single values have been used flex-wrap: nowrap, flex-wrap: wrap, and flex-wrap: wrap-reverse ,the flex-direction takes the default "row" value in all the cases.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
width: 50%;
}
.item {
background-color: #4CAF50;
color: white;
border: 1px solid black;
padding: 10px;
margin: 5px;
flex: 0 0 100px;
}
.container1 {
display: flex;
flex-flow: nowrap;
}
.container2 {
display: flex;
flex-flow: wrap;
}
.container3 {
display: flex;
flex-flow: wrap-reverse;
}
</style>
</head>
<body>
<h2>
CSS flex-flow property
</h2>
<p>
<strong>
Flex Flow: nowrap
</strong>
- Items are arranged in a horizontal row from left
to right and do not wrap.
</p>
<div class="container container1">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: wrap
</strong>
- Items are arranged in a horizontal row in reverse
order from right to left and do not wrap.
</p>
<div class="container container2">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
<p>
<strong>
Flex Flow: wrap-reverse
</strong>
- Items are arranged in a horizontal row in reverse
order from right to left and do not wrap.
</p>
<div class="container container2">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
</body>
</html>
Supported Browsers
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| flex-flow | 29.0 | 11.0 | 28.0 | 9.0 | 17.0 |
css_properties_reference.htm
Advertisements