Flexbox Decoded: Complete Illustrated Guide

Flexbox is one of the most robust layout systems, but it is truly overwhelming for beginners. This article will provide you a comprehensive understanding of the flexbox system and how to use it to build a flexible and responsive layout.

To use flexbox, in your website, you need to include the following CSS:

.selector {
  display: flex;
}

Now, let’s dive in

Flex Direction

The flex-direction property controls the direction of the flex container's main axis and its perpendicular cross axis.

The main axis defines the direction flex items are placed in the flex container.

The possible values for the flex-direction property are:

• row (default): Items are placed from left to right in the flex container.
• row-reverse: Items are placed from right to left in the flex container.
• column: Items are placed from top to bottom in the flex container.
• column-reverse: Items are placed from bottom to top in the flex container.