HTML5 - Box Model vs. FlexBox Model - Introduction

Hey, everyone. This is the introductory tutorial in the new series - "Box Model vs. FlexBox Model". In this part, I'll tell you what a box model is and what the flex box model is. Also, I'll give you the base code to start with and then we'll work from there on to build a beautiful web page.

What is the box model?

In CSS all the HTML elements are considered as boxes. Each element has a margin, that is the space outside the border of the element. The elements also have a border, which is quite self explanatory. Within the border they have a padding, which is the space between the border and the content. And finally, they have content. Here's what it looks like:

The box model in a nutshell...

What is the FlexBox model?

The FlexBox model or the flexible box model is a variant of the box model which is better and more flexible which means that the model changes with the size of the browser. So, with the flex box model you can build cool, dynamic, cross browser and cross platform web apps.

Starting point

Here's the code that we'll use as a starting point. You just have to copy this code onto your text editor and then from there on, we'll start modifying it to build cool apps.

<div id="wrapper">
    <header id="header">
        <h1>Welcome to my website!</h1>
    </header>
    
    <nav id="nav">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
    
    <section id="main">
        <article>
            <header>
                <hgroup>
                    <h1>Title</h1>
                    <h2>Sub Title</h2>
                </hgroup>
            </header>
            <p>The content of this article</p>
            <footer>
                <p>- By &lt;Your-Name&gt;</p>
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                    <h1>Title 2 </h1>
                    <h2>Sub Title2 </h2>
                </hgroup>
            </header>
            <p>The content of the second article</p>
            <footer>
                <p>- By &lt;Your-Name&gt;</p>
            </footer>
        </article>
    </section>
    
    <aside id="sidebar">
        <h4>This is the sidebar</h4>
        <p>This is some content in the sidebar.</p>
    </aside>
    
    <footer id="footer">
        <p>Copyright &copy; &lt;Your-Company&gt;</p>
    </footer>
</div>

All you have to do is copy the code above, paste it in a text editor and save it. If you run it in a browser, you'll see that it doesn't really look beautiful.

View Demo

But that's no problem! From the next tutorial on, we'll modify this and style this code to make it look like a professional website!