Complete Flexbox Tutorial w/ Cheat Sheet
Tags: css, webdev, beginners, tutorial
Published: 2021-01-10 16:09:20

Let's refresh Our **CSS Flexbox** Memory. Here's a **Tutorial & Cheat Sheet** of everything you can do with **CSS flexbox**. Let's Go 🎖️

## The [original Article at FreeCodeCamp](https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/)

# Table of Contents --
   * [FlexBox Architecture](#level-1)
   * [flex-direction](#level-2)
   * [justify-content](#level-3)
   * [align-content](#level-4)
   * [align-items](#level-5)
   * [align-self](#level-6)
   * [flex - grow | shrink | wrap | basis](#level-7)
   * [Short Hands](#level-8)
   * [Conclusion](#level-9)




## You can watch this tutorial on YouTube as well if you like:

{% youtube 7YUR0Igl9eU %}


# FlexBox Architecture <a name="level-1"></a>

So how does Flexbox architecture work? The flex-items [Contents] are distributed along the Main Axis and Cross Axis. And, depending on the flex-direction property, the layout position changes between rows and columns.

![Flex Box model Architecture](https://dev-to-uploads.s3.amazonaws.com/i/hy2oqjvsbk60ef92nktg.png)


# FlexBox Chart --

This chart contains every possible property and value you can use when using flexbox. You can reference it while doing the project and experiment with different values.


![Flex Box property Value Chart](https://dev-to-uploads.s3.amazonaws.com/i/gv3jyh4xt4fbwtq1qejn.png)


# How to Set Up the Project

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jphj7d3c3oh6dvx40ogy.png)

For this project, you need to know little bit of HTML, CSS, and how to work with VS code. Follow along with me ->

   1. Create a folder named "Project-1" & Open VS Code
   2. Create index.html & style.css files
   3. Install Live Server & Run Live Server.

Or, you can just open [Codepen](https://codepen.io/) & start coding.

At the end of this tutorial, you can make website layouts more accurately.

## HTML 

In HTML, write these lines of code inside the body tag 👇

```HTML
<div class="container">
    <div class="box-1"> A </div>
    <div class="box-2"> B </div>
    <div class="box-3"> C </div>
</div>
```

## CSS

target the .container class & all the boxes. Then style the boxes so that all of them looks similar. Like this 👇

**Note :** don't forget to put the height of the container.

```CSS
.container{
   height : 100vh;
}

[class ^="box-"]{
    width: 140px;
    height: 140px;
    background-color: skyblue;
    border: 2px solid black;

// To view the letter better
    font-size: 65px;
}
```


## But Wait....

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq8exwor5aiciu2j6jwu.png)

Before starting, you need to understand the relationship between parent & child classes.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzq3w0bys78fveqb9z0z.png)


Flexbox works on the **parent class**, not on the children classes.

Here, the .container class is the **parent** & our .box-* classes are our **children**.

so, apply the display: flex inside .container class. And place the letters at the center of the box like this ->

```CSS
.container{
    display : flex;
    height : 100vh;

// To place some gap between boxes
    gap : 25px;
}
[class ^="box-"]{
// Code from previous step are here

// Placing text at center 
    display : flex;
    justify-content : center;
    align-items : center;
}
```


And.... we're all set! Let's start coding. 😊

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4ufu718jzjopwn66ik8.png)


# flex-direction <a name="level-2"></a>

The Direction/Orientation in which flex-items are distributed inside flex-container.

![Flex Direction](https://dev-to-uploads.s3.amazonaws.com/i/n2ggh6yy4sbgltrx2i40.png)

![Flex Direction](https://dev-to-uploads.s3.amazonaws.com/i/6m9fg4n5a114q1va3b9p.png)


To recreate these results, Let's write on CSS These lines ->

**Note :** We'll write inside .container class

```CSS
.container{
//code from setup stage are here

// Change the value  👇 here to see results
    flex-direction : row;
}
```


# justify-content <a name="level-3"></a>

This property arranges flex-items along the **MAIN AXIS** inside the flex-container


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


![justify content](https://dev-to-uploads.s3.amazonaws.com/i/1vyg5nf1w7plistni582.png)


To recreate these results, Write on CSS These lines ->

```CSS
.container{
//code from setup stage are here

//  Change the value  👇 here to see results
    justify-content: flex-start;
}
```



# align-content <a name="level-4"></a>

This property arranges flex-items along the **CROSS AXIS** inside the flex-container. This is similar to **justify-content**


![align content](https://dev-to-uploads.s3.amazonaws.com/i/nqvvc2rhf0vx3czy0rnr.png)


![align content](https://dev-to-uploads.s3.amazonaws.com/i/zeet3705rsmz77v66x3c.png)

Please note that, without the **flex-wrap** property, this property doesn't work, here's the demo ->

```CSS
.container{

//  Change the value  👇 here to see results
    align-content: center;

// without this line, align-content won't work
    flex-wrap: wrap;
}
```



# align-items <a name="level-5"></a>

This property distributes Flex-items along the **Cross Axis**


![align items](https://dev-to-uploads.s3.amazonaws.com/i/kt25wxicd7vm8ddtmq0l.png)


To recreate these results, Let's write on CSS ->

```CSS
.container{
//code from setup stage are here

// Change the value 👇 here to see results
    align-items: flex-end;
}
```




# align-self <a name="level-6"></a>

This property works on the children classes. It positions the selected item along the **Cross Axis**

![align self](https://dev-to-uploads.s3.amazonaws.com/i/383cxj4ippb21vjq31q2.png)


In total we have 6 values 
   * flex-start
   * flex-end
   * center
   * baseline
   * stretch
   * auto

To recreate the results, select any .box-* & write

```css
.box-2{
// Change the value 👇 here to see results
     align-self : center;
}
```





























# flex - grow | shrink | wrap | basis <a name="level-7"></a>

The properties that we're discussing right now will work when we resize the window. Let's dive right in.

   * **flex-grow**   : grows the size of a flex-item based on width of the flex-container.
   * **flex-shrink** : The ability for a flex item to shrink based on width of the flex-container. Opposite of flex-grow.


![flex grow flex shrink flex wrap](https://dev-to-uploads.s3.amazonaws.com/i/z094e3wehsoe8z6lsxnz.png)

To achieve these results, follow me ->

**Please Note** : flex-grow & flex-shrink works on children classes. So, we will target all our boxes ->

```CSS
.box-1{
    flex-grow: 1;
}
.box-2{
    flex-grow: 5;
}
.box-1{
    flex-grow: 1;
}
```
Resize the window & see the results.


To duplicate result of flex-shrink, write ->

**Please note :** Delete the flex-wrap property, otherwise it won't work.

```CSS
.box-1{
    flex-shrink: 1;
}
.box-2{
    flex-shrink: 5;
}
.box-1{
    flex-shrink: 1;
}
```
Now, Resize the window & see the results.



   * **flex-wrap**   : Amount of Flex-item you want in a line/row.

![flex wrap flex grow flex shrink](https://dev-to-uploads.s3.amazonaws.com/i/fux9qc05e6rtat192vlm.png)

This works on the .container parent class. So, write ->


```CSS
.container{
    //other codes are here 
  
// Change value 👇 here to see results
    flex-wrap : wrap;
```

   * **flex-basis** : This is similar to adding width to a flex-item, but only more flexible. flex-basis: 10em; it will set the initial size of a flex-item to 10em. Its final size will be based on available space, flex-grow, and flex-shrink.







# Short Hands <a name="level-8"></a>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eayovne50iwxx8ll5e01.png)

   * **flex**       : It is a shorthand to **flex-grow**, **flex-shrink** and **flex-basis** combined. 



![flex flex basis](https://dev-to-uploads.s3.amazonaws.com/i/onoxj7gs9xj4wuf87kjl.png)


You can try this by writing ->

**Please Note :** It only works on the children classes 

```CSS
.box-2{
    flex : 2 1 30em;
}
```

   * **flex-flow** : Short hand to **flex-direction** & **flex-wrap**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/awniqyrepbha5jdquwxh.png)

You can try this by writing ->

**Please Note :** It only works on the parent class 

```CSS
.container{
    flex-flow : row wrap;
}
```


## place-content

This is the shorthand of justify-content & align-content

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72yaytxgighz0cjskp2e.png)


Let's duplicate the results 

**Note :** It works on the parent class

```CSS
.container{
    place-content : center flex-end;
}
```


## Credits

[Kitty Avatars](https://www.flaticon.com/packs/kitty-avatars-3)

![Credits](https://dev-to-uploads.s3.amazonaws.com/i/uzo5e477tn0sc4oz3mec.png)

## Read Next : 

{% link https://dev.to/joyshaheb/master-css-flexbox-2021-build-5-responsive-layouts-css-2021-3n9k %}

{% link https://dev.to/joyshaheb/acing-css-grid-model-in-2021-with-5-exercises-css-2021-51ci %}

# Conclusion <a name="level-9"></a>

Here's Your Medal For reading till the end ❤️

## Suggestions & Criticisms Are Highly Appreciated ❤️

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/usxsz1lstuwry3jlly4d.png)




![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rts3fyi4q53i4qn0um58.png)


   * **YouTube[ / Joy Shaheb](youtube.com/channel/UCHG7IJuST_BXJkne-0u0Xtw)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**