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>
      .container{width:120px; display: flex; flex-flow: row wrap; background-color: brown;}
      .container div{border: 1px solid coral; padding: 12px; color: wheat;}

   <div class="container">

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 »

Follow/Like Us on Facebook

Subscribe Us on YouTube