DEV Community

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

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

Complete Flexbox Tutorial w/ Cheat Sheet

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 :

Conclusion

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

Suggestions & Criticisms Are Highly Appreciated ❤️

Alt Text

Alt Text

Discussion (85)

Collapse
chadalen profile image
Chad Alen • Edited on

This tool is awesome. Makes flexbox easy to understand. I use it alot.
demos.scotch.io/visual-guide-to-cs...

Collapse
jamesthomson profile image
James Thomson
Collapse
jamesthomson profile image
James Thomson

This is also good for beginners to see how common components can be structured. flexboxpatterns.com/

Thread Thread
ca969 profile image
ca969

Wow, that's a really good resource. Thank you for sharing.

Thread Thread
joyshaheb profile image
Joy Shaheb Author

Most welcome ❤️

Thread Thread
Sloan, the sloth mascot
Comment deleted
Collapse
joyshaheb profile image
Joy Shaheb Author

A legend made this software, thank you for sharing this 🏅🙏

Collapse
kyril96340413 profile image
Kyril

Thanks

Collapse
Sloan, the sloth mascot
Comment deleted
Sloan, the sloth mascot
Comment deleted
Collapse
ronaldohoch profile image
Ronaldo Hoch

Niiiice!
Why not this is a PWA?

Collapse
madza profile image
Madza

nice visuals, may I ask what you used? 👀

Collapse
joyshaheb profile image
Joy Shaheb Author

I took Images from Flaticon.com
I gave them credits before conclusion part

Collapse
madza profile image
Madza

Awesome, thanks! 🙏❤

Collapse
bayyash profile image
Bashar Ayyash

Can you please tell me whats the name of icons pack you used? I am a member at Flaticon, I liked the icons you used.

Collapse
nordyj profile image
Jamie Nordmeyer

Awesome reference. Thanks for this!

Collapse
qq449245884 profile image
qq449245884

Dear Joy Shaheb, may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
joyshaheb profile image
Joy Shaheb Author

Sure. Best of luck ❤️🎖️

Collapse
qq449245884 profile image
qq449245884

Thank You Very Much!

Collapse
kyril96340413 profile image
Kyril

Thank you for sharing this.

Collapse
joyshaheb profile image
Joy Shaheb Author

Most welcome ❤️

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
joyshaheb profile image
Joy Shaheb Author

Thank you ❤️

Collapse
rehan124 profile image
Rehan Jamali

Thank you sir... that's cool..but could I download or save it offline?? Bcz I have some Net issues

Collapse
joyshaheb profile image
Joy Shaheb Author

Sure,

Collapse
rehan124 profile image
Rehan Jamali

How could I download it offline?

Thread Thread
joyshaheb profile image
Joy Shaheb Author

Click on the image. Then download/save it/ take screenshots

Collapse
mbustosp profile image
Matías Bustos

Really good job! Thank you. It would be amazing if you could do something similar about Grids 😊

Collapse
joyshaheb profile image
Joy Shaheb Author

Thank you for the well wishes. I'll think about Grids in future. Till then, stay tuned ❤️

Collapse
abdullaharik profile image
Abdullah Arık

Why we use flexbox or grid? What do you think of this?

Collapse
joyshaheb profile image
Joy Shaheb Author

Both of them are different type of Architecture. & they have the ability to produce the same results. It totally depends on the developer which architecture he/she likes to follow.

Collapse
florincornea profile image
Cornea Florin

Great effort, thanks Joy, very useful!

Collapse
joyshaheb profile image
Joy Shaheb Author

Most welcome ❤️

Collapse
oliverleitner profile image
Oliver Leitner

ty alot for the heads up. thats going to my pinwall.

Collapse
joyshaheb profile image
Joy Shaheb Author

Most welcome ❤️

Collapse
hardikchopra242 profile image
Hardik Chopra

Great work 🤩 thank you so much 👍

Collapse
joyshaheb profile image
Joy Shaheb Author

Most welcome ❤️

Collapse
jamesthomson profile image
James Thomson

I've also found this useful for some of those pesky older browser flex bugs. github.com/philipwalton/flexbugs

Collapse
profkache profile image
Salim Kachemela

Great article. Thanks for sharing.

Collapse
olsha100 profile image
Olsha100 • Edited on

Excellent article!

Collapse
toqeer__abbas profile image
Toqeer Abbas
Collapse
realtoughcandy profile image
RealToughCandy.io

Great resource for Flexbox. Nice work.

Collapse
joyshaheb profile image
Joy Shaheb Author

Thank you for the feedback 🏅❤️

Collapse
keloxide profile image
Kellie

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

Collapse
adriathomas profile image
Adrian Thomas

Is there a similar cheat sheet like this but for CSS Grid?

Collapse
joyshaheb profile image
Joy Shaheb Author

Will make it in the future if possible. Till then, stay tuned ❤️🏅

Collapse
anthonygrear profile image
anthony-grear

This is very good content. Well done!

Collapse
robinkartikeyakhatri profile image
Robin Kartikeya Khatri

Thank you so much for sharing this wonderful resource.

Collapse
joyshaheb profile image
Joy Shaheb Author

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

Collapse
crisacosta9 profile image
developing_Dev

Thanks for sharing. This is an awesome resource!

Collapse
surajprasad13 profile image
Suraj Prasad

Nice presentation

Collapse
mvoloskov profile image
Miloslav 🏳️‍🌈 🦋 Voloskov

Nice pics but what about justify-self? What about gap that already works in every new browser except Safari? What about basics like flex-basis?

Perhaps I miss the purpose here.

Collapse
charly2009 profile image
charly2009

nice tutorial

Collapse
sujankh22371674 profile image
सुजन खड्का🇳🇵

Useful article.

Collapse
redbossrabbit profile image
Ibeh Ubachukwu

Amazing😁

Collapse
ryansamaeian profile image
Ryan-samaeian

Sir, You have a talent I have never seen! Tysm :) I know can flex that i know how to use display: flex 😉

Collapse
joyshaheb profile image
Joy Shaheb Author

Thank you soo much for the well wishes. ❤️❤️🏅

Collapse
epsi profile image
E.R. Nurwijayadi

Nice cheat.
Nice chat.
Nice cat.

Collapse
joyshaheb profile image
Joy Shaheb Author

This is epic man 🤣🤣
Take medals 🏅🏅

Collapse
tiiunder profile image
Felix G

Thanks for that! I love flex box but sometimes I hate it as well. But this cheat sheet gets a nice overview and hopefully reduces by frustration in the future.

Collapse
joyshaheb profile image
Joy Shaheb Author

Most welcome Felix,
You can follow me along if you're interested to get more contents like these in future.