Flex flow property (flex-flow)

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

Syntax:

selector {

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

}

Values:

flex-direction - Defines the direction of a flexible item. Possible values are: row (default value), row-reverse, column, column-reverse, initial and inherit
flex-wrap - Defines the wrapping technique of a flexible item. Possible items are: nowrap (default value, wrap, wrap-reverse, initial and inherit
initial or inherit

Example

Example of flex-flow property with flex direction and flex wrap:

<!DOCTYPE html>
<html>
<head><style type="text/css">
div {
    width:90%px; height:90px; margin-top:15px;
    background-color:#ccc;
    color: lightblue; border: 1px solid #555; font-weight:bold;
    display: flex;
     display: -webkit-flex; /* Safari */
    flex-flow: column-reverse wrap;
      -webkit-flex-flow: column-reverse wrap; /* Safari 6.1+ */
}
#div2 {
    flex-flow: row-reverse wrap-reverse;
       -webkit-flex-flow: row-reverse wrap-reverse; /* Safari 6.1+ */ 
}
.flex {
    margin-top:10px; padding:4px;
    width:50px; height:50px;
    background-color:blue;  
}
div.flex:nth-of-type(2n) {
   background-color:lightblue; color:blue;
}
</style></head>

<body>

<div>
    <div class="flex">F1</div>
    <div class="flex">F2</div>
</div>
<div id="div2">
    <div class="flex">F3</div>
    <div class="flex">F4</div>
</div>

<p>To ensure browser support, the proprietary selectors are used in styling</p>

</body>
</html>

›› go to examples ››

Flex flow property (flex-flow)

Syntax:

Values:

Example

Example of flex-flow property with flex direction and flex wrap:

Comments

About

Contact

Get Connected