Manik Dixit's Blog
💪💪💪 CSS Flexbox - Cheatsheet 💪💪💪

💪💪💪 CSS Flexbox - Cheatsheet 💪💪💪

A quick, short, snazzy approach...

Manik Dixit's photo
Manik Dixit
·

7 min read

Table of contents

I am back with another quick refresher cheatsheet to brush up your flexbox concepts in case you get stuck while writing code and need a rack up on your head for getting your flex moves in place... The idea is simple : Read less, learn fast, code more... like really really more... As always do not waste too much time on reading articles and implement actual projects !!!

That is where the real learning happens 😉😉😉

🦧 What is Flexbox ? 🦧

  • Flexbox is a display property for DOM elements and a one-dimensional layout method for arranging items in rows or columns.

🦧 Why use it ? 🦧

  • It is probably the best way to arrange your elements in the DOM and can be a huge asset in mobile responsivity of your beloved website. Ofcourse, there are frontend frameworks like Bootstrap, Tailwind CSS, etc but guess what ? .... They too use flexbox...

🐒 The flex model 🐒

  • When elements are laid out as flex items, they are laid out along two axes:

    • Main Axis
    • Cross Axis

  • Do not confuse with the conventional mathematical X and Y axis !!! Main and cross axis can either be X or Y axis and vice versa.

  • For flex-direction : row

    • Main Axis : X-axis
    • Cross Axis : Y-axis

  • For flex-direction : column

    • Main Axis : Y-axis
    • Cross Axis : X-axis

🦍 Reference example : 🦍

  • Please consider the below code snippets as a starting point or reference for all topics mentioned :
<!-- HTML -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Flexbox</title>
</head>
<body>
    <div class="container">

        <div class="d">
            <img src="./logo.svg" alt="">
        </div>
        <div class="d">
            <img src="./logo.svg" alt="">
        </div>
        <div class="d">
            <img src="./logo.svg" alt="">
        </div>
        <div class="d">
            <img src="./logo.svg" alt="">
        </div>

    </div>
</body>
</html>

/* CSS */

body{
    background-color: black;
}


.container{

}

🦧 Ok... But what is flex-direction ? 🦧

  • Flexbox provides a property called flex-direction that specifies which direction the main axis runs (which direction the flexbox children are laid out in).

  • Default : row

  • So it basically tells how your elements would be laid out in your document, either horizontally (row) or vertically (column).

.container{
    display: flex;

    /* Not needed as flex-direction by default is row

    flex-direction: row;     */
}

1.PNG

.container{
    display: flex;  
    flex-direction: column;     
}

2.PNG

🐒 Wrapping 🐒

  • A very useful property to auto-align your elements when they overflow the container.

  • Typically used for mobile-responsiveness.

  • The nth element that tries to overflow the container would automatically shifted to the next row or column depending on the flex-direction.

/* Assume the images to be pretty big*/

.container{
    display: flex;
    flex-wrap: wrap;
}

3.PNG

  • flex-flow shorthand :
    • A shorthand exists for flex-direction and flex-wrap: flex-flow
flex-direction: row;
flex-wrap: wrap;

/* Shorthand*/
flex-flow: row wrap;

🐒 Horizontal and vertical alignment 🐒

  • You can also use flexbox features to align flex items along the main or cross axis. There are two main properties for this :

    • justify-content
    • align-items

  • justify-content : Controls where the flex items sit on the main axis.

  • align-items : Controls where the flex items sit on the cross axis.

.container{
    display: flex;
    justify-content: center;    
}

4.PNG

.container{
    height: 100vh;
    display: flex;
    align-items: center;
}

5.PNG

🐯🐯🐯 Advanced Properties 🐯🐯🐯

  • Now it's time to test a few advanced properties and values that we can use to tweak our flexbox experience...

🦍 Reference example : 🦍

<!-- HTML -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Flexbox</title>
</head>
<body>
    <div class="container">

        <div class="red">
            <img src="./logo.svg" alt="">
        </div>
        <div class="blue">
            <img src="./logo.svg" alt="">
        </div>
        <div class="green">
            <img src="./logo.svg" alt="">
        </div>
        <div class="purple">
            <img src="./logo.svg" alt="">
        </div>

    </div>
</body>
</html>

/* CSS */

body{
    background-color: lightcoral;
}

.red{
    background-color: red;
    width: 100px;
    margin: 10px;
}

.blue{
    background-color: blue;
    width: 100px;
    margin: 10px;
}

.green{
    background-color: green;
    width: 100px;
    margin: 10px;
}

.purple{
    background-color: purple;
    width: 100px;
    margin: 10px;
}

.container{

}

6.PNG

🐒 Combining properties 🐒

  • We can combine certain flex properties to create a more cohesive effect.
.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

7.PNG

🐒 More on Flex-direction 🐒

  • row-reverse will reverse the normal row direction.
  • column-reverse will reverse the normal column direction.
.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
}

8.PNG

.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
}

9.PNG

🐒 More on Justify-Content 🐒

  • There are few more types of justify-content namely :

    • start
    • end
    • space-between
    • space-around
    • space-evenly
    • flex-start
    • flex-end
    • left
    • right
    • normal

  • justify-content: start 🐎

    • Pack items from the start
.container{
    display: flex;
    height: 100vh;
    justify-content: start;
    align-items: center;
}

10.PNG

  • justify-content: end 🐎
    • Pack items from the end
.container{
    display: flex;
    height: 100vh;
    justify-content: end;
    align-items: center;
}

11.PNG

  • justify-content: flex-start 🐎
    • Pack flex items from the start
.container{
    display: flex;
    height: 100vh;
    justify-content: flex-start;
    align-items: center;
}

12.PNG

  • justify-content: flex-end 🐎
    • Pack flex items from the end
.container{
    display: flex;
    height: 100vh;
    justify-content: flex-end;
    align-items: center;
}

13.PNG

  • justify-content: left 🐎
    • Pack items from the left
.container{
    display: flex;
    height: 100vh;
    justify-content: left;
    align-items: center;
}

14.PNG

  • justify-content: right 🐎
    • Pack items from the right
.container{
    display: flex;
    height: 100vh;
    justify-content: right;
    align-items: center;
}

15.PNG

  • justify-content: normal 🐎
    • Normal alignment
.container{
    display: flex;
    height: 100vh;
    justify-content: normal;
    align-items: center;
}

16.PNG

  • justify-content: space-between 🐎
    • Distribute items evenly, the first item is flush with the start and the last is flush with the end.
.container{
    display: flex;
    height: 100vh;
    justify-content: space-between;
    align-items: center;
}

17.PNG

  • justify-content: space-around 🐎
    • Distribute items evenly, Items have a half-size space on either end.
.container{
    display: flex;
    height: 100vh;
    justify-content: space-around;
    align-items: center;
}

18.PNG

  • justify-content: space-evenly 🐎
    • Distribute items evenly, Items have equal space around them.
.container{
    display: flex;
    height: 100vh;
    justify-content: space-evenly;
    align-items: center;
}

19.PNG

🐕 More on Align-Items 🐕

  • There are few more types of align-items namely :

    • stretch
    • start
    • end
    • flex-start
    • flex-end

  • align-items: stretch 🦮

    • Items will stretch across the whole cross axis.
.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: stretch;
}

20.PNG

  • align-items: start 🦮
    • Pack items from the start
.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: start;
}

21.PNG

  • align-items: end 🦮
    • Pack items from the end
.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: end;
}

22.PNG

  • align-items: flex-start 🦮
    • Pack flex items from the start
.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: flex-start;
}

23.PNG

  • align-items: flex-end 🦮
    • Pack flex items from the end
.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: flex-end;
}

24.PNG

🦊 Ordering flex items 🦊

  • Flexbox also has a feature for changing the layout order of flex items without affecting the source order.
  • By default, all flex items have an order value of 0.
  • Flex items with higher specified order values will appear later in the display order than items with lower order values.

.red{
    background-color: red;
    width: 100px;
    margin: 10px;
    order: 2;
}

.blue{
    background-color: blue;
    width: 100px;
    margin: 10px;
}

.green{
    background-color: green;
    width: 100px;
    margin: 10px;
    order: -1;
}

.purple{
    background-color: purple;
    width: 100px;
    margin: 10px;
    order: 1;
}

.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

25.PNG

So this sums up Flexbox properties for you. I hope you use it to your full advantage as this is an invaluable asset for frontend design using pure CSS and HTML.

😉😉😉 Happy Coding 😉😉😉

#iNeuron #HiteshChaudhary #WebDev #Javascript #LCO #LearnCodeOnline #LCO #css #learncodeonline #cssselectors @hiteshchoudharylco code with hitesh choudharyHTML5CSSiwritecodeHTML