How to Flex Your Flexbox Muscle

Let’s be honest, writing CSS is a pain in the neck. You know it, I know it, the whole world knows it. Well, except for people who don’t know what CSS is.

CSS has been kicking my butt from the moment I decided I want to become a web developer. Someone said CSS is 90% trying to center a div and I agree wholeheartedly.

When I started coding, all I knew was floats. That was my gospel. Float it left, float it right. My code looked like Frankenstein's monster, but floating elements did the job.

Then I met Flex and my whole outlook on CSS changed. CSS Flexbox is a simpler way of arranging your HTML elements on a webpage. Don’t believe me? Just watch

  <nav class="navbar">
    <div class="logo"><img src="#"/></div>
    <div class="navlinks">
      <ul>
        <li><a href="#" alt="">Home</a></li>
        <li><a href="#" alt="">About</a></li>
        <li><a href="#" alt="">Contact</a></li>
        <li><a href="#" alt="">Blog</a></li>
        <li><a href="#" alt="">Careers</a></li>
      </ul>
    </div>
    <div class="nav-end"><button>Request Invite</button></div>
  </nav>

Here’s our practice project's navbar. It has three child elements. In order to use flexbox, we set the display to flex. This will tell the browser that the nav element will use flexbox to place the child elements.

nav{
display: flex;
}

Now we need to set the flex-direction. Flex-direction is row by default but can also be set to row-reverse, column, or column-reverse. Row means that the items flow from left to right, row-reverse means right to left, column means from top to bottom and column-reverse is from bottom to top.

nav{
display: flex;
flex-direction: row;
}

So now our nav child elements flow from left to right. Let’s space them using justify-content. Justify content can be set to flex-start, flex-end,center, space-between, or space-around. For our nav, we want things from the far left to the far right, with no spacing with no space on its edges other than the padding given.

nav{
display: flex;
flex-direction: row;
justify-content: space between;
}

The cool thing with flexbox is that you can even use it on child elements. Let’s get to work on our list items. Set display to inline-flex. It’s a combination of inline and flexbox.

.navlinks ul li {
display: inline-flex;
}

And with that, we’ve done the bare minimum with flexbox. Looks good eh? There are more properties that we haven’t touched. Feel free to experiment with the following;

align-items

flex-wrap

align-self

align-content

In summary, flexbox has been the game-changer for me in my journey through front-end development. You can practice using games like flexbox zombies, trust me, learning by doing is way better than reading about it. With this tool in my toolbelt, CSS has become fun to work with and the possibilities are endless. Let me know what you think of it and your experience with it too.