CSS flex-flow

The CSS flex-flow property is used to define flex-direction and flex-wrap at once. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{width:120px; display: flex; flex-flow: row wrap; background-color: brown;}
      .container div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
   </div>
   
</body>
</html>

Output

CSS flex-flow Syntax

The syntax of flex-flow property in CSS, is:

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

Note - The initial is used to use the default value. Whereas the inherit is used to use the value inherited by the parent element.

The flex-flow property is used as shorthand of following two properties:

flex-direction - used to define the direction of items in flex container. The default value is row
flex-wrap - used to define whether items should be wrapped or not in flex container. The default value is nowrap

CSS Online Test

« Previous Tutorial Next Tutorial »