Zero to hero: Be the master of CSS Flexbox design.

Flexbox is used to design the layout. It makes it simple to align items vertically and horizontally using rows and columns. Items will "stretch/shrink" to different sizes to fill the space. It makes responsive design easier. Flexbox works on 2 axes. main axis (horizontal) and cross-axis (vertical or perpendicular to main axis)

flex-direction: row;

        .container{
            display: flex;
            height: 88px;
            background: #f1f1f1;
            flex-direction: row;
        }
        .container div{
            width: 50px;
            min-height: 50px;
            background: #8acded;
            margin: 5px;
        }
        

1

2

3

4

flex-direction: row-reverse;

        .container{
            ...
            flex-direction: row-reverse;
        }
        

1

2

3

4

By default, alight-item: stretch; is applied. That's why you see all the items stretching and covering the height of the parent. But if we specifically mention alight-item: flex-start/flex-end/center; it will align the item vertically. Let's see this with examples.

align-items

align-items: flex-start;

        .container{
            ...
            flex-direction: row;
            align-items: flex-start;
        }
        

1

2

3

4

align-items: center;

With align-items: center; , it becomes easy to align items vertically centre within a container. Earlier it was not that easy to achieve. Now you can do it with just one line of CSS.

        .container{
            ...
            flex-direction: row;
            align-items: center;
        }
        

1

2

3

4

If you have items of different height within a parent and you want to align them in centre, you can use align-items: centre;

            .container{
                ...
                align-items: center;
            }
            

1

2

3

4

align-items: flex-end;

        .container{
            ...
            flex-direction: row;
            align-items: flex-end;
        }
        

1

2

3

4

justify-content

justify-content defines the alignment of items along the main axis (horizontally). It helps align items left/centre/right or distribute space between them.

justify-content: space-between;

        .container{
            ...
            flex-direction: row;
            justify-content: space-between;
        }
        

1

2

3

4

justify-content: space-around;

        .container{
            ...
            flex-direction: row;
            justify-content: space-around;
        }
        

1

2

3

4

justify-content: space-evenly;

        .container{
            ...
            flex-direction: row;
            justify-content: space-evenly;
        }
        

1

2

3

4

justify-content: flex-start;

        .container{
            ...
            flex-direction: row;
            justify-content: flex-start;
        }
        

1

2

3

4

justify-content: center;

        .container{
            ...
            flex-direction: row;
            justify-content: center;
        }
        

1

2

3

4

justify-content: flex-end;

        .container{
            ...
            flex-direction: row;
            justify-content: flex-end;
        }
        

1

2

3

4

flex-direction: column

Align items vertically on cross axis (perpendicular to main axis)

flex-direction: column;

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

1

2

3

4

flex-direction: column-reverse;

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

1

2

3

4

flex-wrap

flex-wrap tells whether flex items are forced onto one line or can wrap onto multiple lines.

flex-wrap: wrap;

        .container{
            ...
            flex-wrap: wrap;
            justify-content: space-between;
            //if you want last item to be left aligned, don't use space-around
        }
        .container div{
            width: 31%;
            min-height: 50px;
            background: #8acded;
            border-radius: 4px;
        }
        

1

2

3

4

align-content

align-content sets the distribution of space on cross-axis (vertically) between and around the items

align-content: space-around;

        .container{
            ...
            flex-wrap: wrap;
            align-content: space-around;
        }
        

1

2

3

4

align-content: space-evenly;

        .container{
            ...
            flex-wrap: wrap;
            align-content: space-evenly;
        }
        

1

2

3

4

align-content: space-between;

        .container{
            ...
            flex-wrap: wrap;
            align-content: space-between;
        }
        

1

2

3

4

Dynamic Layouting

flex-shrink

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container. It takes a number as a value.

Let's say, we provide flex-shrink: 3 to the second flex-item. It means the second flex-item will shrink three times more than the rest of the flex-items.
If we provide flex-shrink: 0 to the 1st flex-item, it means that 1st flex-item will shrink zero time to the rest of the items.

        <div class="container">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>    
        </div>
        .container{
            display: flex;
            background: #f1f1f1;
            height: 150px;
        }
        .box{
            width: 120px;
            margin: 10px;
            background: #8acded;
        }
        

1

2

3

4

flex-grow

The flex-grow property takes all leftover space (horizontally) of a container and divides them between flex items. It takes a number as a value.

If 3rd flex item has flex-grow: 2 and 4th flex item has flex-grow: 1 - It menas, 3rd flex item will get space twice as 4th flex item (from leftover space).
So, if the leftover space is 60px then 3rd item will get 40px and 4th item will get 20px; These spaces will be added to the items.

When container width increases, flex item will adjust its width dynamically depends on flex-grow or flex-shrink value.

        <div class="container">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box box3"></div>
            <div class="box box4"></div>    
        </div>
        .container{
            display: flex;
            background: #f1f1f1;
            height: 120px;
        }
        .box{
            width: 60px;
            margin: 10px;
            background: #8acded;
        }
        .box3{
            flex-grow: 2
        }
        .box4{
            flex-grow: 1;
        }
        

1

2

3

4

Note: - flex-grow takes leftover space, divide among items and add to the flex-item initial width, but if you don't want it to add to the initial width, instead you want to specify a new initial width then use flex-basis property.

The flex-basis property specifies the initial length of a flexible item (it overrides the initial length of the item).

If we provide flex-basis: 0 to 3rd and 4th flex item - it means the leftover space will be divided as per flex-grow and instead of adding it to initial flex item width, it will be added to flex-basis which is zero in this case. That signifies that- 3rd flex item will be having space twice as the 4th flex item. In a simpler word- item 3 and 4 has zero initial width (because of flex-basis: 0). Now, whatever leftover space they get will be added to their flex-basis initial width (which is zero in this case)

Short hand css for flex-grow, flex-shrink and flex-basis

You can use property flex and provide 3 values with space. These 3 values are for flex-grow, flex-shrink and flex-basis.

        .box{
            flex: flex-grow [flex-shrink]  [flex-basis];   
            //we can only provide flex-grow and leave  flex-shrink and flex-shrink
            //if we leave them- they will be treated as zero
        }    
        

change order of items in flexbox

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container. It takes a number as a value. What this means is that items are assigned an integer, items are then placed in the visual order according to that order value.

        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>    
        </div>
        .container{
            display: flex;
            background: #f1f1f1;
            height: 120px;
        }
        .box{
            width: 60px;
            margin: 10px;
            background: #8acded;
        }
        .box1{
            order: 4;
        }
        .box2{
            order: 3;
        }
        .box3{
            order: 1;
        }
        .box4{
            order: 2;
        }
        

1

2

3

4

Please refer the below image to revise all flexbox properties