CSS Flexbox Cheat Sheet

6 min readOct 18, 2022

All about CSS flexbox

· What is flexbox?
· Flexbox architecture
· Flexbox properties
∘ Flexbox properties that apply to the container
∘ Flexbox properties that apply to the items in a container
· Set up the project
∘ HTML
∘ CSS
· All the CSS flexbox properties
∘ display
∘ flex-direction
∘ justify-content
∘ align-content
∘ align-items
∘ flex-wrap
∘ gap
∘ flex -grow | flex-shrink | flex-basis
∘ align-self
∘ flex
∘ flex-flow
∘ place-content
· Conclusion

What is flexbox?

Flexbox is a one-dimensional layout, which helps to lay, align items of a container.

Flexbox architecture

Flexbox properties

Here is the list of all CSS flexbox properties.

Flexbox properties that apply to the container

display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
gap: 10px (or) any number;

Flexbox properties that apply to the items in a container

order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

Set up the project

For this we are going to create a HTML file(index.html) and a CSS(style.css) file.

HTML

Write the below code in index.html

<div class='container'>
    <div class='box-red'></div>
    <div class='box-green'></div>
    <div class='box-blue'></div>
    <div class='box-yellow'></div>
</div>

CSS

Write the below code in style.css

.container{
    height: 100vh;
}
[class ^="box-"]{
    width: 50px;
    height: 50px;
}
.box-red{
   background-color: red
}
.box-green{
   background-color: green;
}
.box-blue{
   background-color: blue
}
.box-yellow{
   background-color: yellow
}

Output

All the CSS flexbox properties

display

By default all the div tags are block elements. By adding the display property to display: flex; or display: inline-flex; we change the nature to inline.

.container{
    height: 100vh; 
    display: flex;
}

flex-direction

This property helps us to set the direction and orientation in which our flex items should be aligned inside our container.

flex-direction: row(default) | column | row-reverse | column-reverse

.container{
    height: 100vh; 
    display: flex;
    flex-direction: row;
}

justify-content

This property allows us to arrange items across the main axis in flex-container.

.container{
    height: 100vh; 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

justify-content: flex-start; justify-content: flex-end; justify-content: center;

align-content

This property allows us to arrange items across the cross-axis in the flex- container.

For better understanding of align-content, let’s change the HTML and CSS.

HTML

<div class="container">
        <div class="box-red">Home</div>
        <div class="box-green">About</div>
        <div class="box-blue">Products</div>
        <div class="box-yellow">Signup</div>
</div>

CSS

.container{
    height: 50vh;
    width: 50vw;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
}

align-items

This property allows us to arrange items across the cross-axis in the flex-container.

align-items: flex-start | flex-end | center | baseline | stretch;

To achieve this use the below code:

HTML

<div class="container">
        <div class="box-red">Home</div>
        <div class="box-green">About</div>
        <div class="box-blue">Products</div>
        <div class="box-yellow">Signup</div>
</div>

CSS

.container {
    height: 50vh;
    width: 50vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: center;
}

flex-wrap

This property allows us to set the number of items in a row of a flex-container.

flex-wrap: nowrap (default) | wrap | wrap-reverse;

.container{
    height: 30vh;
    display: flex;
    gap: 10px;
    border: 1px solid green;
    flex-direction: row;
    flex-wrap: nowrap;
}

gap

This gives space between the items in a flex-container. gap: 10px;

flex -grow | flex-shrink | flex-basis

These properties work for flex-items in a flex-container.

flex-grow

This property grows the size of the flex-item based on width of flex-container.

.box-red{
    background-color: red;
      flex-grow: 4;
}.box-green{
    background-color: green;
      flex-grow: 3;
}.box-blue{
    background-color: blue;
      flex-grow: 2;
}.box-yellow{
    background-color: yellow;
      flex-grow: 1;
}

flex-shrink

This property helps the flex-items to shrink based on width of flex-container. It is opposite to flex-grow.

.box-red{
    background-color: red;
      flex-shrink: 4;
}.box-green{
    background-color: green;
      flex-shrink: 3;
}.box-blue{
    background-color: blue;
      flex-shrink: 2;
}.box-yellow{
    background-color: yellow;
      flex-shrink: 1;
}

flex-basis

This is similar to adding width to a flex-item, to make it more flexible. For example setting the flex-basis: 10em; it will set initial width to 10em , but the final width is decided based on flex-grow and flex-shrink.

align-self

This property works on flex-items. It positions the selected item along the cross-axis.

.box-red{
    background-color: red;
    align-self: flex-start;
}
.box-green{
    background-color: green;
    align-self: flex-end;
}
.box-blue{
    background-color: blue;
    align-self: center;
}
.box-yellow{
    background-color: yellow;
    align-self: flex-start;
}