Member-only story

Flexbox Decoded: Complete Illustrated Guide

Tapajyoti Bose
6 min readFeb 27, 2022

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.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Tapajyoti Bose
Tapajyoti Bose

Written by Tapajyoti Bose

Top Rated Freelancer || Blogger || Cross-Platform App Developer || Web Developer || Open Source Contributor || FIRE Enthusiast

Responses (2)

Write a response