Flexbox Decoded: Complete Illustrated Guide
Tags: webdev, html, css, ux
Published: 2022-02-27 06:33:13

---
canonical_url: https://tapajyoti-bose.medium.com/flexbox-decoded-complete-illustrated-guide-569940a2a8d7
---

**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**:

```css
.selector {
  display: flex;
}
```

Now, let's dive in

![dive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecu2bz4l71lf7u4b8ln0.gif)

## 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.

![row](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afucq5b4orcmf37m6jbo.png)
![column](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1gvlc9ulhjplb7kjhv0.png)
![row-reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68zgu4if7fu2zu0gtc8j.png)
![column-reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7socuwpm52c11j34t9pw.png)

## Justify Content

The `justify-content` defines the alignment along the **main axis**. It helps distribute **extra free space leftover** when either all the `flex` items on a line are inflexible, or are flexible but have reached their maximum size.

The possible values for `justify-content` property are:

-   `flex-start` (default): items are packed toward the start of the `flex-direction`.
-   `flex-end`: items are packed toward the end of the `flex-direction`.
-   `center`: items are centered along the line
-   `space-between`: items are evenly distributed in the line; the first item is on the start line, the last item on the end line
-   `space-around`: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
-   `space-evenly`: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

![justify-content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqca5myhbdc9iaveronk.png)

## Align Items

The `align-items` defines the default behavior for how `flex` items are laid out along the **cross-axis** on the current line.

The possible values for the `align-items` property are:

-   `stretch` (default): stretch to fill the container (still respect min-width/max-width)
-   `flex-start`: items are placed at the start of the **cross-axis**.
-   `flex-end`: items are placed at the end of the **cross-axis**.
-   `center`: items are centered in the **cross-axis**
-   `baseline`: items are aligned such as their baselines align

![align-items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j2h5vh6f2emozdgchfe.png)

## Align Self

The `align-self` property defines the alignment for the `flex` item itself, on the current line, overriding the `align-items` property for its own `flex` item. The possible values for `align-self` are the same as `align-items`.

![align-self](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn5r01923dn72gcy9zz8.png)

## Order

The `order` property defines the order of the `flex` item relative to other `flex` items on the same line. Items are sorted by `order` value in ascending order. It takes a numeric value (default value: `0`)

![order](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gcbe2dt8kxqdya0m2mo.png)

## Flex

`flex` is a shorthand property that sets the `flex-grow`, `flex-shrink`, and `flex-basis` properties.

The `flex-grow` property determines how much of the available space in the `flex` container the item should take up (default value: `0`).

`flex-shrink` defines how much the item should shrink relative to the rest of the items in the `flex` container when there is extra space in the `flex` container (default value: `1`).

`flex-basis` defines the initial size of the item, before any other properties (except `order`) are applied. It can be set to a particular size like `20px` or left at `auto`.

Negative values for any of these properties are **invalid**.

Typically the property is to define the size of an item in proportion to other items in the `flex` container.

![flex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhsmt3vpjuckljmobuiq.png)

In the picture, the first & last item uses `flex: 1`, and the second item uses `flex: 2`

## Flex Wrap

By default, `flex` items will all try to fit onto one line. This can be modified allowing the items to `wrap` as needed with the `flex-wrap` property.

The possible values for `flex-wrap` are:

-   `nowrap` (default): all `flex` items will be on one line
-   `wrap`: `flex` items will wrap onto multiple lines, from top to bottom.
-   `wrap-reverse`: `flex` items will wrap onto multiple lines from bottom to top.

## Align Content

The `align-content` aligns a `flex` container’s lines within when there is extra space in the **cross-axis**, similar to how `justify-content` aligns individual items within the **main-axis**. It is used in conjunction with `flex-wrap`.

![align-content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7v606rc4y469lccgzvbs.png)

The possible values for `align-content` are:

-   `normal` (default): items are packed in their default position as if no value was set.
-   `flex-start`: items packed to the start of the container.
-   `flex-end`: items packed to the end of the container.
-   `center`: items centered in the container
-   `space-between`: items evenly distributed; the first line is at the start of the container while the last one is at the end
-   `space-around`: items evenly distributed with equal space around each line
-   `space-evenly`: items are evenly distributed with equal space around them
-   `stretch`: lines stretch to take up the remaining space

## Gap

The `gap` property explicitly controls the space between `flex` items. It applies that spacing only between items not on the outer edges.

The `gap` property accepts **one** or **two** values. If one value is provided, it applies that **gap between all items**. If two values are provided, the first value applies to **the space between items on the same line**, and the second value applies to **the gap between lines**.

![gap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk2yekpexpbz1e2d2hhb.png)

# Wrapping Up

Now you know everything required to master `flexbox`! Give yourself a pat on the back!

![Pat on the back](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljg3s8w2aw5xc5vs2pmh.gif)

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

**Happy developing!**

# Reference

**CSS Tricks**: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

I am a freelancer who will start off as a **Digital Nomad** in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)