A Complete CSS Guide About Flexbox

Display  – Parent Element (Container).

This defines a flex container, inline or block depending on the given value. It enables the flex context for all its direct children. The flex container becomes flexible by setting the display property to flex.

HTML
<div class="container">
      <p class="box-1">
        CSS3 .
      </p>
      <p class="box-2">
        Flexbox
      </p>

CSS
.container {
  display: flex;
}

Flex-direction – Flexbox Elements

The flex-direction property defines in which direction the container wants to stack the flex items.This establishes the main-axis, by defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. A flex items is primarily laying out either in horizontal Row or vertical Columns.

Values of Flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

The “column” value stacks the flex items vertically (from top to bottom).

HTML
<div class="flex-container-column">
      <p class="box-1">
        Flexbox
      </p>
      <p class="box-2">
        Container
      </p>
      <p class="box-3">
        Column
      </p>
    </div>

CSS
.flex-container-column {
  display: flex;
  flex-direction: column;
}

The “column-revese”  value stacks the flex items vertically (but from bottom to top).

HTML
<div class="flex-container-column-reverse">
      <p class="box-1">
        Flexbox
      </p>
      <p class="box-2">
        Container
      </p>
      <p class="box-3">
        Column
      </p>
    </div>

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

The “row” value stacks the flex items horizontally (from left to right).

HTML
<div class="flex-container-row">
      <p class="box-1">
        Flexbox
      </p>
      <p class="box-2">
        Container
      </p>
      <p class="box-3">
        Row
      </p>
    </div>

CSS
.flex-container-row {
  display: flex;
  flex-direction: row;
}

The “row-reverse” value stacks the flex items horizontally (but from right to left).

HTML
<div class="flex-container-row-reverse">
      <p class="box-1">
        Flexbox
      </p>
      <p class="box-2">
        Container
      </p>
      <p class="box-3">
        Row-reverse
      </p>
    </div>

CSS
.flex-container-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}