Flexbox 101

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 it?

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>

</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.

Extras:

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
you might also like
Your web browser is out-of-date. Update your browser for more security, comfort and the best experience on this site. Click here to update your browser.