Flexbox 101

22nd January 2016 :: Website Design

With the death of Internet Explorer 8, 9 and 10 last week, the web developers at núcleo have been feeling particularly jubilant. So they thought they'd give away a CSS3 Flexbox library — which you can add into any project to save you time.

You will need a good understanding of Flexbox and media queries to utilise this library.

What is Flexbox?

What we have made is a CSS (and SASS file) that makes every Flexbox attribute available at every media size to use in HTML. The idea is that you can flex display a series of divs, and change the CSS at different media sizes as you see fit without accessing the CSS.

An example:

<div class="fx-sm-flex-display fx-md-align-content-center fx-sm-align-content-flex-start">

<div class="inner-div-1"></div>

<div class="inner-div-2"></div>

<div class="inner-div-2"></div>


The above example will add flex-display: flex (with all necessary browser specific prefixes) to the top div element to all screen sizes ABOVE 544px (defined by “-sm” in the SASS file). That means when you get to mobile size, the div will return to its default CSS.

The div will use the flexbox attribute align-content: center (plus all prefixes) to anything above 768px (defined by “fx-md-align-content-center”). Once under 768px, it will resume the align-content: flex-start (defined by “fx-sm-align-content-flex-start”) until 544px, at which point it will return to default CSS. As you can see, it can save you a lot of time in writing specific lines in CSS over and over to achieve the same result.


If you open the SASS file, you will see we have made the file so you can edit, add, or remove media queries, as well as setting a custom prefix to all CSS classes if you run into conflicts.

Hope you enjoy!

Download the ZIP (CSS & SASS) Download from Github

Like what you're seeing?

If you like what you're looking at and you think it might be a fit for you, we'd love to hear from you! Let's get talking!