The Flexbox Layout in CSS3

Secondly, if we have items that we want to appear in-line with text, we use the display property value inline-flex. To illustrate inline-flex in flexbox layout, add the following CSS to the HTML above.

ul{
     display: inline-flex;
  }

After adding the CSS above, notice how the result displays.

The flex container

When applying flexbox layout, we have to differentiate between the flex container and the flex items.

The flex container is the parent element on which flex value is applied (e.g. the article element in the example above).

The flex items are the children of the flex container. They are the direct children of the flex container. In our example above, the <div> represents the direct children or flex items. Flex items may include different elements, provided they are direct children of the flex container.

The flex-flow Property

One of the properties of the flexbox layout is the flex-flow. The flex-flow property controls the flex-direction and flex-wrap properties.

1. The flex-direction is used to control the direction of the flow of flex items. It has the following values
   1. row (flow left to right),
   2. row-reverse (flow right to left),
   3. column (flow up to down) and
   4. column-reverse (flow down to up).

The row value is the default, on which elements are laid out in rows.

2. The flex-wrap property is used to determine if the flex container will permit multiple rows or not. Remember that flexbox layout defines unidirectional items. Items could be laid in rows or columns.

To permit multiple rows, we use flex-wrap: wrap declaration.

Flex-wrap has the following values

• wrap,
• nowrap, and
• wrap-reverse.

We may use the flex-direction and flex-wrap properties individually, but it is advised to use the flex-flow property. For example, instead of:

flex-direction: row-reverse; and

flex-wrap: nowrap;

we use:

flex-flow: flex-direction flex-wrap 

flex-flow: row-reverse nowrap;

Let us illustrate with the following:

article{
       display: flex;
      /*flex-flow: row wrap;
     }
  div, ol{
         flex: 300px;
       }