How To Debug Flexbox Using Chrom Or Firefox

Using CSS Flexbox while coding can be very frustrating sometimes, especially when you are just getting use to it.

Figuring out where and how to align flex-items and what columns or row some flex-items falls in can also be confusing.

Well! This shouldn't be so! Since most web browsers comes with dev tools that are very well equipped to solve this problems. In this blog post we are going to be learning how to debug CSS Flexbox using chrome and firebox since both browses are the most commonly used web browsers among developers for website development.

CREATING FLEXBOX HTML AND CSS FILE

So the first thing we are going to do in other to learn how debug flexbox with chrome dev tools is to create a project.

Type and run the code below

<div class="flex_container">
        <div class="item item1">This is a</div>
        <div class="item item2">Flexbox</div>
        <div class="item item3">Tutorial</div>
        <div class="item item4">created with</div>
        <div class="item item5">love by</div>
        <div class="item item6">Alex Anie</div>
        <div class="item item7">stay focus</div>
    </div>

From the HTML code above we created a <div> tag with a class of flex_container inside which seven other <div> tags are nested. Each <div> tag has a text content them.

.flex_container {
        display: flex;
        align-items: flex-start;
        height: 500px;
        border: 10px solid #42210B;
    }

    .item {
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        margin: 5px;
    }

    .item1 {
        width: 60px;
        height: 60px;

    }

    .item2 {
        width: 100px;
        height: 100px;

    }

    .item3 {
        width: 70px;
        height: 20px;
        padding: 10px;
    }

    .item4 {
        width: 80px;
        height: 50px;
        padding: 80px;
    }

    .item5 {
        width: 150px;
        height: 50px;

    }

    .item6 {
        width: 70px;
        height: 40px;
        padding: 60px;
    }

    .item7 {
        width: 200px;
        height: 50px;
        padding: 20px;
    }

While in our CSS file we added a little bit of styling, enough to be able to understand our end goal.

we have flex_container class, item and item1 to item7 classes respectively. Each item classes has a width, height and padding to them with uneven sizes (The don't all share them same size).

The flex_container is set to display of flex, this convert it from a box to a flexible box (a flex container).

Note: that border is added to that we can visually see the boundary that our flex_container extend to and the height determines how far down we want our flex_container to grow.

Your code should look like this when you run it on your browser.

LUNCHING YOUR CHROM DEV TOOLS:

Now that we've seen how our flex-items are align on the browser. We are going to learn how to inspect each flex-item with chrome dev tools.

• First Step: Right click on your browser
• Second Step: A dialog box will pop-up
• Third Step: click on the inspect option (The Last option).

See illustration for better understanding [illus1]

Now this should open up your developer tools. You can also use your shortcut keys by combining CTRL + SHIFT + I keys.

See illustration for better understanding [illus2]

Now that we have developer tools open, make sure you are under the element section, (this is indicated a number one in the above illustration) under this you'll see a little button with a text of flex (indicated as number two), this is a toggle button as it let's you turn off and on the flexbox guide-lines. This guide-lines lets you visually see the number of columns your flex-items are split into.

See illustration for better understanding

We can also locate this guide-lines under the layout section (indicated as number three) which is a checkbox button (indicated as number five).Beside this checkbox button is another button (indicated as number four) which is used to change the guide-lines color.

See illustration for better understanding

To try this out, click on the orange button. This should bring out a the color palette. You can choose any color you want from this palette. Note that this.

LUNCHING YOUR FIREFOX DEV TOOLS:

Before we think of lunching Firefox dev tools, we need to open our html fire directly on Firefox, to do this click on the browser search bar and press CTRL + O. This should open up a dialog box.

See illustration for better understanding [illus5]

Navigate to where you save your HTML file, click on it and click open. This should display your HTML file as a webpage on your browser.

Now that we have our page setup, press CTRL + SHIFT + I or Right click and select inspect. This should open up your developer tools on Firefox.

See illustration for better understanding [inspect]

just like chrome, Firefox have a similar features. You can use the same method mentioned above on chrome on Firefox.

See illustration for better understanding [snap]

CONCLUSION:

Alright! We’ve come to the end of this tutorial.

Thanks for taking your time to read this blog post about HOW TO DEBUG FLEXBOX USING CROME OR FIREFOX.

Feel free to ask questions. I’ll gladly reply back.

You can find me on Twitter and other social media @ocxigin.

Cheers