CSS | flex-flow Property

05 Jul, 2019
The flex-flow property is sub-property of flexible box layout module and also shorthand property for flex-wrap and flex-direction.Note:The flex property is useless when the element is not flexible item.
flex-flow: flex-direction flex-wrap;

row nowrap: It arrange the row same as text direction and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines.Syntax:flex-flow: row nowrap; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row nowrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row nowrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
Syntax:
flex-flow: row nowrap; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row nowrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row nowrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
row-reverse nowrap: It arrange the row opposite of text direction and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines.Syntax:flex-flow: row-reverse nowrap; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row-reverse nowrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row-reverse nowrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow: row-reverse nowrap; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row-reverse nowrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row-reverse nowrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
column nowrap: same as row but top to bottom and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines.Syntax:flex-flow: column nowrap; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column nowrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column nowrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow: column nowrap; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column nowrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column nowrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
column-reverse nowrap: Same as row-reverse top to bottom and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines.Syntax:flex-flow: column-reverse nowrap; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column-reverse nowrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column-reverse nowrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow: column-reverse nowrap; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column-reverse nowrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column-reverse nowrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
row wrap: It arrange the row same as text direction and wrap property is used to break the flex item into multiples lines. It makes flex items wrap to multiple lines according to flex item widthSyntax:flex-flow: row wrap; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row wrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row wrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow: row wrap; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row wrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row wrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
row-reverse wrap: It arrange the row opposite of text direction and wrap property is used to reverse the flow of the flex items when they wrap to new lines.Syntax:flex-flow: row-reverse wrap; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row-reverse wrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row-reverse wrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow: row-reverse wrap; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row-reverse wrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row-reverse wrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
column wrap: It arrange the row same as row but top to bottom and wrap property is used to reverse the flow of the flex items when they wrap to new lines.Syntax:flex-flow:column wrap; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column wrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column wrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow:column wrap; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column wrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column wrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
column-reverse wrap: It arrange the row same as row-reverse top to bottom. and wrap property is used to reverse the flow of the flex items when they wrap to new lines.Syntax:flex-flow:column-reverse wrap; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column-reverse wrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column-reverse wrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow:column-reverse wrap; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column-reverse wrap;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column-reverse wrap</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
row wrap-reverse: It arrange the row same as text direction and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines.Syntax:flex-flow:row wrap-reverse; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row wrap-reverse;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row wrap-reversep</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow:row wrap-reverse; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row wrap-reverse;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row wrap-reversep</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
row-reverse wrap-reverse: It arrange the row opposite text direction and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines.Syntax:flex-flow:row-reverse wrap-reverse; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row-reverse wrap-reverse;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row-reverse wrap-reversep</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow:row-reverse wrap-reverse; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: row-reverse wrap-reverse;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:row-reverse wrap-reversep</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
column wrap-reverse: It arrange the row same as row but top to bottom.and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines.Syntax:flex-flow:column wrap-reverse; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column wrap-reverse;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column wrap-reverse</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow:column wrap-reverse; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column wrap-reverse;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column wrap-reverse</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
column-reverse wrap-reverse: It arrange the row same as row-reverse top to bottom and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines.Syntax:flex-flow:column-reverse wrap-reverse; Example:<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column-reverse wrap-reverse;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column-reverse wrap-reverse</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>Output:
flex-flow:column-reverse wrap-reverse; 
Example:
<!DOCTYPE html>  <head>    <title>flex-flow property</title>    <style>        #main {            width: 400px;            height: 300px;            border: 2px solid black;            display: flex;            flex-flow: column-reverse wrap-reverse;        }                  #main div {            width: 100px;            height: 50px;        }                  h1 {            color: #009900;            font-size: 42px;            margin-left: 50px;        }                  h3 {            margin-top: -20px;            margin-left: 50px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <h3>The flex-flow:column-reverse wrap-reverse</h3>    <div id="main">        <div style="background-color:#009900;">1</div>        <div style="background-color:#00cc99;">2</div>        <div style="background-color:#0066ff;">3</div>        <div style="background-color:#66ffff;">4</div>        <div style="background-color:#660066;">5</div>        <div style="background-color:#663300;">6</div>    </div></body>  </html>
Output:
Google Chrome 29.0
Internet Explorer 11.0
Mozila Firefox 28.0
Safari 9.0
Opera 17.0
CSS-Properties
Picked
Technical Scripter 2018
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.