Before flexbox CSS layout module, there were following layout modules are available:

• Block
• Inline and inline-block
• Positioning of div using position

The flexbox layout module target to providing a more efficient way to manage layout, and make it more easier to design structure without having to float and positioning, The container having unknown or/and dynamic width, it will distribute space among the items in the container.

Flexbox Elements

A flexbox having main container with flexbox CSS and with a one or more element as a child elements

Flexbox properties for the parent elements

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Flex container with child div's inside flex-wrapper i.e.

HTML
<div class="flex-wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

We need to add property for parent div

CSS
.flex-wrapper {
  display: flex;
}

Direction properties for the parent elements

1. Flex-direction

Flex-direction property defines in which direction the container (.flex-wrapper) want to flow child items

Properties for flex-direction:
- flex-direction: column;
- flex-direction: column-reverse;
- flex-direction: row;
- flex-direction: row-reverse;

flex-direction: column;

The column value fix the child items vertically

.flex-wrapper {
  display: flex;
  flex-direction: column;
}

flex-direction: column-reverse:

The column value fix the child items vertically but from bottom to top

.flex-wrapper {
  display: flex;
  flex-direction: column-reverse;
}

flex-direction: row

The row value fix the child items horizontally from left to right

.flex- wrapper {
            display: flex;
            flex-direction: row;
          }

flex-direction: row-reverse

The row value fix the child items horizontally from right to left

.flex- wrapper {
            display: flex;
            flex-direction: row-reverse;
          }