Beginners Guide to CSS Flexbox With Examples

Flexbox is not a single property; it's a complete module that comes with a number of features. In this article, we will look at a complete guide for CSS Flexbox.

Before going into detail, I just want to answer why we should use flexbox layout instead of a traditional way of doing layout webpage using display properties, float properties, positional properties

Advantages of Using Flexbox

• Flexbox equally distributes height and width for the item, and even though items are added dynamically, yu don't need to care about CSS properties 
• Easily reverse the structure of items
• Easily grow and shrink the width of the item as per dynamic width of the container
• Easily control the direction of the elements like vertical or horizontal based on a single property
• Change the order of any element
• 96% of the browser having support for flexbox 

Layout for Flexbox

Refer to the below diagram to see how Flexbox works.

Flexbox is divided into two-axis main axis and cross axis. 

In normal layout, when we are using display inline or inline-block, it goes from left to right only

• main-axis: This is the default axis where items are laid out by default. It's not necessarily horizontal always; it can be vertical depending upon flex-direction
• Main start/Main-end: Items will be placed from main-start to main-end
• Main size: The width or height of the container depending upon flex-direction
• Cross-axis: Cross axis is perpendicular to the main axis. 
• Cross-start/Cross-end: Items will be laid out started from cross-start to cross-end
• Cross-size: The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

Before starting with the Flexbox properties, we should understand which properties are meant for flex container and flex items.

Flexbox Container Properties

• display
• flex-direction
• flex-wrap
• justify-contents
• align-items
• align-contents

Flexbox Item Properties      

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Flexbox Container Properties

Display

As we know display property have the number of value like inline, block, inline-block, etc. But if we are giving value as flex then we are turning on flexbox context

.container {  display: flex }

flex-direction

flex-direction decides that how items will be laid out on main-axis horizontally or vertically

xxxxxxxxxx

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Above are the possible values for flex-direction property

• row: Row is by default value for flex-direction where item will be placed from left to right
• row-reverse: Items will be placed from right to left
• column: Items will be placed vertically top to bottom
• column-reverse: Items will be placed bottom to top
• initial: It set's value to the default
• inherit: Inherit the value from the parent

flex-wrap

flex-wrap controls the behavior that items will move into the next line if the container width is less than the total item width.

xxxxxxxxxx

flex-wrap: nowrap | wrap | wrap-reverse;

Default value: nowrap

no-wrap: fit into the one line by adjusting the width of the item 

• wrap: item will be laid down to next line from top to bottom
• wrap-reverse: item will be laid down to next line from bottom to top

flex-flow

flex-flow is shorthand for flex-direction and flex-wrap

xxxxxxxxxx

flex-flow: <flex-direction> | <flex-wrap>

Default value: row no-wrap

Let's see some examples:

Above, we saw an example of flex-flow where flex-direction is row. You can do the same for flex-direction column just consider the above  vertically.

justify-content

justify-content is used to align items on the main-axis. Its container property so it will align all child items to the particular position like to the center, start or end or giving space between them.

xxxxxxxxxx

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Default value: flex-start

• flex-start - Align items to the start of the container depending upon flex-direction

xxxxxxxxxx

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

As you can see above, flex-start started from the right side, not from the writing mode direction

• center: Align items to the center
• flex-end: Align items to the end of the container as per flex-direction
• space-around: Gives space around the items by adjusting width
• space-between: Gives space between the items not at the start and end of the container
• space-evenly: Gives an equal amount of space around the item
• start: Align items to the start of the container as per writing mode direction
• end: Align items to the end of the container as per writing mode direction

align-items

align-items property is used to align items in respective of cross-axis like we have justify-content for main-axis

xxxxxxxxxx

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

Default value: stretch

• stretch: occupies the full height of the container if height to the items not given externally
• flex-start: align-items to the start of the container in consideration with cross-axis
• center: align-items to the center in consideration with cross-axis
• flex-end: align-items to the end in consideration with cross-axis
• baseline: align-items as per baseline of the item content in consideration with cross-axis

align-content

align-content is used to align rows not items in respective of cross-axis.

You might get confused about the difference between align-items and align content.

Let' s see an example by comparing align-items and align-content.

As you can see in the above align-items, center align-items to center in respective of cross-axis and align-content align rows to the center in respective of cross-axis.

We have taken an example with two rows because align-content does not affect single line

Flex Item Properties

Using order property, it’s possible to re-arrange the natural order of container items.

Default value: 0

The first diagram shows default behavior where all items have order value 0.

In the second diagram, item 1 (highlighted one) moves to last because its order value is greater than the remaining three.

In the third diagram, item 3 moves to the first position because it has order value -1, which is smaller than the other three items.

In the fourth diagram, item 1 and item 3 move to last because their order value is greater than others.

flex-grow

flex-grow is allowed the item to grow as container size greater than the total items size.

Default value: 0

In the above example:

The first diagram shows default behavior where items not accommodating remaining space takes only width provided to the item.

In the second diagram, you can see we made flex-grow: 1 to all items it means all items divided remaining space in equal ratio. It will behave the same if we give value as 2 to all items because we are giving ratio value.

In the third diagram, item 2 (highlighted one) takes twice as much as space as compared to other items because it has value 2 and it's double the other items values.

NOTE: negative values are not allowed

flex-shrink

flex-shrink property allow item to shrink as container size decreases

Default value: 0

If all items in the container have value as 1, then all the items will shrink in equal ratio.

And all items have value as 1 except one item, which has value 2, then this item will shrink to half the other items.

For example:

As you can see above in the given flex-shrink: 2 to the third element shrink twice as much as other elements.

Negative values are not allowed.

flex-basis

flex-basis is nothing but the min-width for the container items in flexbox context.

Default value: Auto

For example, if we haven't provided value to the flex-basis property, then its value will be auto by default, then flexbox items will take the width, which is equal to the content width.

flex

flex is shorthand for flex-grow, flex-shrink, and flex-basis

Default value: 0 1 auto

xxxxxxxxxx

flex-grow: <flex-grow> <flex-shrink> <flex-basis>

There are a number of possibilities for flex values

xxxxxxxxxx

/* One value, If unitless number then its flex-grow */ flex: 1; 

/* One value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content; 

/* Two values: flex-grow | flex-basis */ flex: 1 30px; 

/* Two values: flex-grow | flex-shrink */ flex: 2 2; 

/* Three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%;

align-self

align-self is for aligning individual items in respective of cross-axis, and it will override the values set by align-items.

As you can see in the above example, we have given align-self: center to item 2 element, and then only that item's position has changed.

Examples

We have learned a lot, so let's look at a practical example.

Centering Element Vertically and Horizontally

xxxxxxxxxx

//html

<!DOCTYPE html>

<head>

    <link rel="stylesheet" href="index.css" />

</head>

<body>

<section>

    <div class="container">

           <div class="item">

          </div>

         </div>

</section>

</body>

</html>

xxxxxxxxxx

.container {

    display: flex;

    width: 47%;

    height: 300px;

    border: 2px solid;

    padding: 5px;

}

.container .item {

    flex-basis: 100px;

    height: 96px;

    border: 2px solid;

    justify-content: center;

    color: white;

    align-items: center;

    background-color: cadetblue;

}

Output will be:

Creating a Navbar 

xxxxxxxxxx

<!DOCTYPE html>

<head>

    <link rel="stylesheet" href="index.css" />

</head>

<body>

    <section class="main-container">

        <div class="logo-container container">

            <strong>Logo</strong>

        </div>

        <ul class="menu-container container">

            <li class="menu">

                <strong>

                    Home

                </strong>

            </li>

            <li class="menu">

                <strong>

                    Contact Us

                </strong>

            </li>

            <li class="menu"> 

                <strong>

                    About Us

                </strong>

            </li>

        </div>

    </section>

</body>

</html>

xxxxxxxxxx

.main-container {

    display: flex;

    background: #ce8888;

}

.container {

    flex-basis: 50%;

}

.logo-container {

    justify-content: flex-start;

    align-items: center;

    display: flex;

    color: white;

    padding: 10px;

    font-size: x-large;

}

.menu-container {

    display: flex;

    height: 60px;

    justify-content: flex-end;

    align-items: center;

    padding: 0;

    width: 50%;

    margin: 0;

}

.menu-container .menu {

    padding: 4px 10px;

    border-radius: 5px;

    color: bisque;

    display: flex;

    justify-content: center;

    align-items: center;

    align-items: center;

    cursor: pointer;

}

.menu-container .menu:active ,.menu-container .menu:hover{

    background: repeating-linear-gradient(45deg, #824e4e, transparent 100px)

}

Output will be:

You can check out the demo here.

Conclusion

CSS flexbox has very good features to do layout for webpages. Please feel free to ask questions in the comments.