Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021
Tags: css, tutorial, beginners, webdev
Published: 2021-02-04 16:34:25

Here's a practical guide to learn CSS Flexbox in 2021 by Building 5 Responsive Layouts. Let's Go Guys🥇


###[**Check The Figma Design Here**](https://www.figma.com/file/d1bG4msAzxixv9jWP8e4nA/Master-CSS-Flexbox-Layout?node-id=0%3A1)


##Table of Contents --
   * [Flex-Box Architecture](#level-1)
   * [Setup](#level-2)
   * [Level-1](#level-3)
   * [Level-2](#level-4)
   * [Level-3](#level-5)
   * [Level-4](#level-6)
   * [Level-5](#level-7)
   * [Conclusion](#level-8)

[More layout Designs here](https://csslayout.io/patterns/)

# Youtube <a name="level-1"></a>

{% youtube m8BSEUUB5so %}


# Flex-Box Architecture 

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

# Flex-Box Chart

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

## Here's the complete flexbox cheat sheet

{% post https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl %}


# Setup <a name="level-2"></a>


Open [CodePen](codepen.io/) / any code editor and place these 👇

## SCSS 

```SCSS
// defining border color, gap, padding in variables 

$gap : 4vh;
$padding : 4vh;
$color : #48CAE4;

// Defining Break-Points

$bp : (
  mobile : 480px,
  tablet : 768px,
  desktop : 1440px,
);

//Defining our Conditional Media query Mixins.
//To save Time & Coffee.

@mixin query($display){
  @each $key, $value in $bp{
    
    //  defining max-width
    @if ($display == $key){
      @media (max-width: $value){@content;}
    }
  }
}
```

Again.........


```SCSS
//Changing The Default Settings..

*{
  margin:0px;
  padding: 0px;
  box-sizing: border-box;
  body{
    width: 100%;
    min-height: 100vh;
    font-family: sans-serif;
    font-size: 45px;
  }
}
```


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


# Level-1 <a name="level-3"></a>

![Level-1](https://dev-to-uploads.s3.amazonaws.com/i/yjx1adsec062quujq7ke.png)

### HTML

```HTML
<!-- container class holds 3 children
block-1, block-2, block-3 -->

<div class="container">

<!--block-1 has 3 children, box-1,box-2,box-3 -->

  <div class="block-1">
    <div class="box-1">A</div>
    <div class="box-2">B</div>
    <div class="box-3">C</div>
  </div>

<!--similar to block-1, values are changed -->

  <div class="block-2">
    <div class="box-4">D</div>
    <div class="box-5">E</div>
    <div class="box-6">F</div>
  </div>

<!--similar to block-1, values are changed -->

  <div class="block-3">
    <div class="box-7">G</div>
    <div class="box-8">H</div>
    <div class="box-9">I</div>
  </div>
</div>
```

### SCSS

```SCSS
// Style rules for container class

.container{
  display: flex;

//to lay .block-* classes in a column
  flex-direction: column;

//Setting gap between the .block-* classes
  gap: $gap;
// to set some padding & border inside
  padding: $padding;
  border: 1vh solid $color;
}

// To select all the .block-* classes

[class ^="block-"]{
//To lay the boxes in a row.
  display: flex;
  flex-direction: row;

//Removing border(1vh+1vh), gap, & padding from the height
// And then equally distributing spaces between the 
// .block-* classes by dividing it by 3
  height: (100vh-2vh -$gap*2-$padding*2) / 3;

// putting gap between .box-* classes
  gap: $gap;
  
// Style rules for mobile display
  @include query (mobile){
    flex-direction: column;
// you can pick any value you wish.
    height: 500px;
  }
  
}

// To select all the .box-* classes

[class ^="box-"]{
  
// To set the text at center of every box
  display: flex;
  justify-content: center;
  align-items: center;
  
// To divide spaces among the boxes
// try flex-gap:1; you can see the difference.
// flex-grow: 1; // 1+1+1 =3 => 1/3 X 100% => 33.33% each

  flex-basis: (100%)/3; // 33.33% each
  border : 2px solid black;
  border-radius: 10px;
  background-color: #c1c1c1;
}
```



# Level-2 <a name="level-4"></a>

![Level-2](https://dev-to-uploads.s3.amazonaws.com/i/dhkcw4npzbmp34lcm4yf.png)

### HTML

```HTML
<div class="container">
  <div class="item-1">Home</div>
  <div class="item-2">About</div>
  <div class="item-3">Services</div>
  <div class="item-4">Contact</div>
</div>

```

### SCSS

```SCSS
.container{
// Change the Font-size 
  font-size: 35px;
  display: flex;

//To set orientation of the items
  flex-direction: row;

// To distribute available space
  justify-content: space-evenly;
  padding: $padding;
  border : 1vh solid $color;

// style rules starts from Tablet Screens
  @include query(tablet){
//Changing orientation of the items
    flex-direction: column;
    align-items: center;

//Setting gap for items Vertically
    gap: $gap 
  }
}
```



# Level-3 <a name="level-5"></a>


![Level-3](https://dev-to-uploads.s3.amazonaws.com/i/evaqt7tcdldtu7g3f9io.png)


### HTML 

```HTML
<div class="container">
  <div class="block-1">Left</div>
  <div class="block-2">Right</div>
</div>
```

### SCSS

```SCSS
.container{
  display: flex;
  flex-direction: row;
  gap: $gap;
  padding: $padding;

// Style Rules for Mobile Display
  @include query(mobile){
    flex-direction: column;
  }
}


//Selecting & styling 2 classes altogether
[class ^="block-"]{

//To put the left, right text at center
  display: flex;
  justify-content: center;
  align-items: center;

  border : 4px solid $color;
//Setting height of each block
  height: 100vh -$padding*2;

// Style Rules for Mobile Display
  @include query(mobile){
    height: 50vh -$padding*2;
  }
}
```


```SCSS
// Style Rules Left Block
.block-1{
//will occupy 20% of the Available width
  flex-grow: 2;
}

// Style Rules Right Block
.block-2{
//will occupy 80% of the Available width
  flex-grow: 8;
}
```


# Level-4 <a name="level-6"></a>

![Level-4](https://dev-to-uploads.s3.amazonaws.com/i/6bwmcadjacdyh5fobk1d.png)


### HTML 


```HTML
<div class="container">
  <div class="block-1">
    <div class="box-1">A</div>
  </div>
  <div class="block-2">
    <div class="box-2">B</div>
    <div class="box-3">E</div>
  </div>
    <div class="block-3">
    <div class="box-4">C</div>
    <div class="box-5">D</div>
  </div>
</div>
</div>
```

### SCSS 


```SCSS
// Style rules for .container
.container {
  display: flex;
  flex-direction: column;
  padding: $padding;
  gap: $gap;
}

// Style rules for all .block-*
[class ^="block-"]{
  display: flex;
  flex-direction: row;
  gap: $gap;
// Removing Padding, Gap & divide by 3
  height: (100vh -$gap*2 -$padding*2)/3;
  
// Style Rules for Mobile Version  
  @include query(mobile){
    flex-direction: column;
  }
}

// Style rules for all .box-*
[class ^="box-"]{
// To place the letter at center
  display: flex;
  justify-content: center;
  align-items: center;
  
// Border, Border-radius & background-color
  border : 1vh solid $color;
  border-radius: 10px;
  background-color: #c1c1c1;
}


//A
.box-1{
  flex-basis: 100%;
}

//B & D
.box-2, .box-5{
  flex-basis: 70%;
}
//E  & C
.box-3,.box-4{
  flex-basis: 30%
}

// Style Rules for Mobile Version 

@include query(mobile){
  .block-2{
    height: (100vh*2)/3; // 66.66vh
  }
  .block-3{
    flex-direction: row;
  }
//   Selecting B, E, C, D
  .box-2,.box-3,.box-4,.box-5{
    flex-basis: 50%;
  }
}
```


# Are You winning Son? Let's Turn Up the heat 🥵


# Level-5 <a name="level-7"></a>

![Level-5](https://dev-to-uploads.s3.amazonaws.com/i/8lb4gh8povgvcb40iz0h.png)


### HTML 

```HTML
<div class="container">
  <div class="block-1">
    <div class="box-1">A</div>
  </div>
  <div class="block-2">
    <div class="box-2">B</div>
    <div class="box-3">C</div>
    <div class="box-4">D</div>
  </div>
  <div class="block-3">
    <div class="box-5">E</div>
  </div>
</div>
```

### SCSS


```SCSS
// Style rules for .container
.container{
  display: flex;
  flex-direction: column;
  gap: $gap;
  padding: $padding;
}

// Style rules of all .block-*
[class ^="block-"]{
  display: flex;
  flex-direction: row;
  gap: $gap;
}

// Style rules of all .box-*
[class ^="box-"]{
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1vh solid $color;
  border-radius: 10px;
}

// Defining A & E Together
.box-1,.box-5{
  flex-basis: 100%;
  height: 20vh;
}

// Defining C here
.box-3{
  flex-basis: 60%;
//   Removing Gap & padding
  height: 60vh -$gap*2-$padding*2;
}

// Defining B & D Together
.box-2,.box-4{
  flex-basis: 20%;
}

// Media query for mobile Screen

@include query(mobile){
  .block-2{
    flex-direction: column;
    height: 60vh;
  }
// Hiding our B block
  .box-2{
    display: none;
  }
// Increasing Height of C  
  .box-3{
    flex-basis: 80%;
  }
}
```

## Credits

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


# Read More 

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

# Conclusion <a name="level-8"></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/)**