DEV Community

Cover image for Complete Flexbox Tutorial w/ Cheat Sheet
Joy Shaheb
Joy Shaheb

Posted on • Edited on • Originally published at freecodecamp.org

Complete Flexbox Tutorial w/ Cheat Sheet

#css #webdev #beginners #tutorial

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

Table of Contents --

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

FlexBox Architecture

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

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

How to Set Up the Project

Alt Text

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 & 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 👇

<div class="container">
    <div class="box-1"> A </div>
    <div class="box-2"> B </div>
    <div class="box-3"> C </div>
</div>
Enter fullscreen mode Exit fullscreen mode

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.

.container{
   height : 100vh;
}

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

// To view the letter better
    font-size: 65px;
}
Enter fullscreen mode Exit fullscreen mode

But Wait....

Alt Text

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

Alt Text

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

.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;
}
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

flex-direction

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

Flex Direction

Flex Direction

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

Note : We'll write inside .container class

.container{
//code from setup stage are here

// Change the value  👇 here to see results
    flex-direction : row;
}
Enter fullscreen mode Exit fullscreen mode

justify-content

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

justify content

justify content

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

.container{
//code from setup stage are here

//  Change the value  👇 here to see results
    justify-content: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

align-content

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

align content

align content

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

.container{

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

// without this line, align-content won't work
    flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

align-items

This property distributes Flex-items along the Cross Axis

align items

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

.container{
//code from setup stage are here

// Change the value 👇 here to see results
    align-items: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

align-self

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

align self

In total we have 6 values

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
  • auto

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

.box-2{
// Change the value 👇 here to see results
     align-self : center;
}
Enter fullscreen mode Exit fullscreen mode

flex - grow | shrink | wrap | basis

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

To achieve these results, follow me ->

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

.box-1{
    flex-grow: 1;
}
.box-2{
    flex-grow: 5;
}
.box-1{
    flex-grow: 1;
}
Enter fullscreen mode Exit fullscreen mode

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.

.box-1{
    flex-shrink: 1;
}
.box-2{
    flex-shrink: 5;
}
.box-1{
    flex-shrink: 1;
}
Enter fullscreen mode Exit fullscreen mode

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

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

.container{
    //other codes are here 

// Change value 👇 here to see results
    flex-wrap : wrap;
Enter fullscreen mode Exit fullscreen mode
  • 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

Alt Text

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

flex flex basis

You can try this by writing ->

Please Note : It only works on the children classes

.box-2{
    flex : 2 1 30em;
}
Enter fullscreen mode Exit fullscreen mode
  • flex-flow : Short hand to flex-direction & flex-wrap

Alt Text

You can try this by writing ->

Please Note : It only works on the parent class

.container{
    flex-flow : row wrap;
}
Enter fullscreen mode Exit fullscreen mode

place-content

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

Alt Text

Let's duplicate the results

Note : It works on the parent class

.container{
    place-content : center flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Credits

Kitty Avatars

Credits

Read Next :

joyshaheb

Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021

Joy Shaheb ・ Feb 4 '21

#css #tutorial #beginners #webdev
joyshaheb

Acing CSS Grid Model in 2021 with 5 Exercises || CSS 2021 🔥

Joy Shaheb ・ Dec 22 '20

#tutorial #beginners #webdev #css

Conclusion

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

Suggestions & Criticisms Are Highly Appreciated ❤️

Alt Text

Alt Text

Latest comments (82)

Collapse
 
prabhukadode profile image
Prabhu •

Good

Collapse
 
satyamgupta1495 profile image
Satyam Gupta •

If you use VS Code, there's an extension called Flex-Box cheat Sheet you can use that too!

Collapse
 
keloxide profile image
Kellie •

Awesome, i just learnt place-content...👍🏿

Collapse
 
anthonygrear profile image
anthony-grear •

This is very good content. Well done!

Collapse
 
afif profile image
Temani Afif •

note that order can be used with negative values

Collapse
 
dnjosh10 profile image
Dumte Nwidoobee Joshua •

This tool makes me feel happy and confident. When next I will use my flexbox now, no more struggling with positioning child elements

Collapse
 
mahtamunhoquefahim profile image
Mahtamun Hoque Fahim •

❤️️ !!

Collapse
 
toqeer__abbas profile image
Toqeer Abbas •

youtube.com/watch?v=OZk0rHtLnd8&t=...?

Collapse
 
prayashshrestha profile image
prayashShrestha •

thanku so much for this .. best wishes.

Collapse
 
robinkartikeyakhatri profile image
Robin Kartikeya Khatri •

Thank you so much for sharing this wonderful resource.

Collapse
 
joyshaheb profile image
Joy Shaheb •

Most welcome. In future , I'm planning to create a cheat sheet for CSS Grid model as well, Till then , stay tuned & take care ❤️

View full discussion (82 comments)