Lesson Weekend

In Intro to Programing we practiced creating layouts with floats and positions. But you may have found it tricky to place items exactly where you wanted them using only these properties. If so, you aren't alone! You see, floats weren't originally meant for designing web layouts! As the What Is Flexbox? article from Space Ninja explains:

...floats were never intended for layout. They were a CSS recreation of the old align attribute in HTML. Clever web developers found ways to abuse them to create complex layouts, but they’re limited and buggy — as anyone who’s wrestled with a clearfix can attest.

Crazy, right? Developers worldwide have been crafting layouts with these, and it's not even what they were designed for! Thankfully, recent CSS3 specifications contain a much more efficient solution for organizing items in our user interfaces: Flexbox.

back to the future screenshot

Introduction to Flexbox

Flexbox stands for "flexible box". It's a CSS3 layout tool proposed as a replacement for positioning items with floats, tables, inline-blocks, and the like.

With only a few declarations, flexbox allows containers to alter their children's width, height, order, etc. to best fill available space automatically! This means we don't have to meticulously tweak properties for individual items to ensure they're spaced evenly or lined up with one another.

History

Different iterations of flexbox have existed since 2009, when the CSS Working Group from W3C originally proposed it. Since then, multiple drafts of the feature have been submitted to W3C.

At the time of this writing it's a W3C candidate recommendation, which means it's not yet officially recommended by W3C, and therefore not yet an "official" feature in core CSS. But it's certainly not going away any time soon either. You see, despite still working through the formal W3C review process, almost all major browsers already support it!

And, as evident by a quick Google search, it's rapidly gaining popularity amongst developers. Regardless of its 'official' status with the W3C, it's clear flexbox is here to stay.

Required Video: CSS Flexbox Essentials

Ready to see this in action? Watch the following DevTips video by Travis Neilson. This video demonstrates what flexboxes look like, and discusses the properties that configure them. Then we'll walk through implementing our own flexboxes in the next lesson.

If you'd like to follow along, code used in this video is available here.

Travis also briefly mentions auto-prefixers. Don't worry about these yet, we'll explore them later. For now, just focus on observing how flexboxes work, and what they look like.

Lesson 6 of 36
Last updated more than 3 months ago.