Flex-flow

The flex-flow property is a shorthand property for the flex-wrap and flex-direction properties.

Let us you remind that if there are no flexible items, flex-flow property won't have any effect.

CSS Syntax

flex-flow: flex-direction flex-wrap | initial | inherit;

Let's see an example:

You will see an example with row and wrap-reverse values in the first example.

<!DOCTYPE html>
<html>
   <head>
      <style> 
          #color-container {
             width: 200px;
             height: 200px;
             padding-left:0;
             list-style-type:none;
             border: 1px solid #c3c3c3;
             display: -webkit-flex; 
             -webkit-flex-flow: row-reverse wrap;
             display: flex;
             flex-flow: row wrap-reverse;
         }

           #color-container li {
              width: 50px;
              height: 50px;
          }
     </style>
   </head>
   <body>

        <ul  id="color-container">
           <li style="background-color:red;">A</li>
           <li style="background-color:yellow;">B</li>
           <li style="background-color:orange;">C</li>
           <li style="background-color:pink;">D</li>
           <li style="background-color:lightgreen;">E</li>
           <li style="background-color:purple;">F</li>
        </ul>

   </body>
</html>

Here is the result:

Let's see another example:

This is the second example of flex-flow which you will see that we used row-reverse and nowrap values.

<!DOCTYPE html>
<html>
   <head>
      <style> 
          #color-container {
             width: 200px;
             height: 200px;
             padding-left:0;
             list-style-type:none;
             border: 1px solid #c3c3c3;
             display: -webkit-flex; 
             -webkit-flex-flow: row-reverse wrap; 
             display: flex;
             flex-flow: row-reverse nowrap;
          }

           #color-container li{
              width: 50px;
              height: 50px;
          }
      </style>
    </head>
   <body>

       <ul id="color-container">
         <li style="background-color:red;">A</li>
         <li style="background-color:yellow;">B</li>
         <li style="background-color:orange;">C</li>
         <li style="background-color:pink;">D</li>
         <li style="background-color:lightgreen;">E</li>
         <li style="background-color:purple;">F</li>
        </ul>

   </body>
</html>

Here is the result:

Property Values

Value Descriptions
flex-direction It defines the flexible items' direction.
Possible values:
row
row-reverse
column
column-reverse
initial
inherit
flex-wrap It defines the flexible items should wrap or not.
Possible values:
nowrap
wrap
wrap-reverse
initial
inherit
initial It makes the property use its default value.
inherit It inherits the property from its parents element.


Prev
Next

Related articles