Introduction to Flexbox For Beginners

Flexbox addresses the shortfalls in each of the aforementioned display mechanisms. Here’s a brief overview of its super powers:

  • It can easily vertically center contents
  • It can change the visual order of elements
  • It can automatically space and align elements within a box, automatically assigning available space between them
  • It can make you look 10 years younger (probably not, but in low numbers of empirical tests (me) it has been proven to reduce stress)

The bumpy path to Flexbox

Flexbox has been through a few major iterations before arriving at the relatively stable version we have today. For example, consider the changes from the 2009 version (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/), the 2011 version (http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/), and the 2014 version we are basing our examples on (http://www.w3.org/TR/css-flexbox-1/). The syntax differences are marked.

These differing specifications mean there are three major implementation versions. How many of these you need to concern yourself with depends on the level of browser support you need.

Browser support for Flexbox

Let’s get this out of the way up front: there is no Flexbox support in Internet Explorer 9, 8, or below.

For everything else you’d likely want to support (and virtually all mobile browsers), there is a way to enjoy most (if not all) of Flexbox’s features. You can check the support information at http://caniuse.com/.

Before we get stuck into Flexbox, we need to take a brief but essential tangent.

Leave prefixing to someone else

It’s my hope that once you have seen a few examples of Flexbox, you will appreciate its utility and feel empowered to use it. However, manually writing all the necessary code to support each of the different Flexbox specifications is a tough task. Here’s an example. I’m going to set three Flexbox related properties and values. Consider this:

.flex {
    display: flex;
    flex: 1;
    justify-content: space-between;
}

That’s how the properties and values would look in the most recent syntax. However, if we want support for Android browsers (v4 and below) and IE 10, here is what would actually be needed:

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

It’s necessary to write all that because in the last few years, as browsers made experimental versions of new functionality available, they did so with a ‘vendor prefix’. Each vendor had their own prefix. For example -ms- for Microsoft, -webkit- for WebKit, -moz- for Mozilla, and so on. For every new feature this meant it was necessary to write multiple versions of the same property; the vendor prefixed versions first, and the official W3C version at the bottom.

The result of this spell in web history is CSS that looks like the previous example. It’s the only way to get the feature working across the widest number of devices. Nowadays, vendors rarely add prefixes but for the foreseeable future we must live with the reality of many existing browsers still requiring prefixes to enable certain features. This brings us back to Flexbox, an extreme example of vendor prefixing thanks to not just multiple vendor versions but also different specifications of the feature. And understanding and remembering everything you need to write in the current format and each previous format is not a whole lot of fun.

I don’t know about you, but I’d rather spend my time doing something more productive than writing out that little lot each time! In short, if you intend to use Flexbox in anger, take the time to setup an auto-prefixing solution.

Choosing your auto-prefixing solution

For the sake of your sanity, to accurately and easily add vendor-prefixes to CSS, use some form of automatic prefixing solution. Right now, I favor Autoprefixer (https://github.com/postcss/autoprefixer). It’s fast, easy to setup and very accurate.

There are versions of Autoprefixer for most setups; you don’t necessarily need a command line based build tool (for example, Gulp or Grunt). For example, if you use Sublime Text, there is a version that will work straight from the command palette: https://github.com/sindresorhus/sublime-autoprefixer. There are also versions of Autoprefixer for Atom, Brackets, and Visual Studio.

Flexbox has four key characteristics: direction, alignment, ordering, and flexibility. We’ll cover all these characteristics and how they relate by way of a few examples.

The examples are deliberately simplistic; just moving some boxes and their content around so we can understand the principals of how Flexbox works.

Here’s the markup Perfect vertically centered text

<div class="Dunebook">
    Hello, I'ts fun learning on dunebook.com!
</div>

Here is the entire CSS rule that’s styling that markup:

.CenterMe {
    background-color: indigo;
    color: #ebebeb;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

The majority of the property/value pairs in that rule are merely setting colors and font sizing. The three properties we are interested in are:

.CenterMe {    
    /* other properties */
    display: flex;
    align-items: center;
    justify-content: center;
}

If you have not used Flexbox or any of the properties in the related Box Alignment specification (http://www.w3.org/TR/css3-align/) these properties probably seem a little alien. Let’s consider what each one does:

  • display: flex: This is the bread and butter of Flexbox. This merely sets the item to be a Flexbox (as opposed to a block, inline-block, and so on).
  • align-items: This aligns the items within a Flexbox in the cross axis (vertically centering the text in our example).
  • justify-content: This sets the main axis centring of the content. With a Flexbox row, you can think of it like the button in a word processor that sets the text to the left, right, or center (although there are additional justify-content values we will look at shortly).

 

About the author

Deven Rathore

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares