I first started learning HTML in the early 2000s from a library book. At this time, our house didn't even have a dial-up connection, much less a high-speed Internet hookup. In the book, I learned how to lay out my website using tables.
Depending on your age, you may nod your head in nostalgic agreement or chuckle and say, "Nah, they didn't do that. Tables aren't meant to do that."
Nope, it's true: for a good chunk of the early days of the web, <table>s were the primary way people created the layouts for their site. But eventually, when browsers got wider CSS support, we began using floats to position things on our websites. It was a vast improvement.
When I went to college for web design in 2006, we were taught both, presumably because we may encounter some legacy sites still using table-based layouts. But we used CSS and floats to create our designs for new projects in class, which I then used for projects over the next few years.
Watch: Intro to Flexbox Tutorial
CSS Frameworks
In 2013, I began using a CSS framework, Bootstrap 3, for my projects. This version of Bootstrap still primarily used CSS floats to create layouts, but my method of writing CSS changed dramatically. Using the framework, rather than me writing the CSS to create the layout, I included the Bootstrap CSS file and added the appropriate CSS classes in my markup and templates. It was a radically different approach to design, and one that I still favour today.
In 2018, the next version of the framework was released, Bootstrap 4. The method of doing the designs was similar (adding the correct CSS classes to my markup and templates), but under the hood, Bootstrap's layout method was completely changed. In this version, the CSS layout was based on Flexbox.
Basics of Flexbox Layout
But some web projects might not need all that Bootstrap offers—maybe we just need a simple layout and a bit of custom CSS. So, today, it's worth taking a look at the basics of Flexbox layout.
Although we can do responsive and accessible layouts with floats, accomplishing this with Flexbox is much easier (and for me, takes less brain cycles to comprehend). In the video above, I show how to create a simple three-column layout.
For small screens and accessibility, we'll have the main content appear first and have our two sidebars below. Once we hit a certain breakpoint, we want the left sidebar to appear first, then the main content, then our right sidebar. Because we can't change the markup, we have to accomplish this all in CSS.
Pushing and Pulling With Floats
With floats, to get the left sidebar to appear first, we need to set all of our <div>s to position: relative; allowing us to move them around. Then we need to push our main <div> 25% to the left by writing left: 25%;. We are pushing it 25% because that is the width of our left sidebar.
OK, more mental gymnastics: next, we have to pull our left sidebar -50% by writing float: -50%. We are pulling it 50% because that is the width of our main content.
Does it work? Yes. But boy, what a mental hula-hoop.
Order With Flexbox
With Flexbox, we can avoid the brain juggling of pushing and pulling our <div>s. Instead, we can use the order property to rearrange our content.
We start by adding display: flex; around an element that wraps our <div>s (in this video, I've put it on the <body> tag, but this could also be applied to a wrapping <div>). Then, we can apply our width to our main content and sidebars, similar to how we would when using float.
Now we just say which order we want our <div>s to appear! No more pushing, no more pulling.
For our left sidebar, I set order: 1; to make it appear first, order: 2; for our main content, and order: 3; for our right sidebar.
The cool thing about this—as shown in the video—is that for each breakpoint I can change the order of the elements by applying different order numbers. A heck of a lot easier than trying to do this with floats.
Going Further
You can do a whole lot more with Flexbox, but the video above gives a good, simple primer on what it offers. If you'd like to go further, W3Schools.com's Flexbox article has a lot more info on what you can do with layout. To get more in-depth web development training, check out our training page.
Enjoy!