Learn how to align your items evenly with flexbox

Learn how to align your items evenly with flexbox

In this post I will give you an easy to follow example how you can align your items evenly with flexbox

The code in this example will be fairly simple:

  1. we have an index.html with following content:
<html>
<header>
    <link rel="stylesheet" href="styles.css">
</header>
<body>
<div class="flex-container">
    <div>
        Div 1
    </div>
    <div>
        Div 2
    </div>
    <div>
        Div 3
    </div>
</div>
</body>
</html>

We will just import a styles.css and add three divs with a surrounding parent div to it. The parent div will have a css class flex-container with the purpose to align the child divs evenly.

  1. The styles.css will give our divs borders to make them better visible:
div {
    border-style: solid;
}

.flex-container {
    display: flex;
    justify-content: space-evenly;
    border-color: red;
}

The .flex-container is the important part:

  1. To be able to use flexbox we need to call display: flex;

  2. The command to align the items evenly is justify-content: space-evenly;

And that's it! Now you know how to align your items evenly in a row :)

Live Example

If you want to play around a bit more you can use following codesandbox example:

https://codesandbox.io/s/mmm9647knj?fontsize=14

More Tips

Flexbox can do a lot more than this example. For More tips and tricks on how to use flexbox visit:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Have fun!

Did you like it? Why don't you try also...

How to easily add font awesome to your Vue CLI project in under 2 min.

How to easily add font awesome to your Vue CLI project in under 2 min.

In this post I will shortly show you how to easily add fontawesome to your Vue Cli project.

Build & Deploy your first blog in under 5 minutes with Gatsby & Surge

Build & Deploy your first blog in under 5 minutes with Gatsby & Surge

If you want to know how to build your own blog in under 5 minutes using Gatsby check out this post.

403 Forbidden error message when you try to push to a GitHub repository using HTTPS

403 Forbidden error message when you try to push to a GitHub repository using HTTPS

I created a new github account and wanted to push my first project to it. This article shows you how to enforce a new password prompt when getting a 403 error during git push.