Flexbox LESS Mixin

If you’ve taken even a cursory glance at the flexbox CSS standard, you’ve probably seen that it’s confusing. There are two some many different standards implemented in browsers. What’s a confused developer to do?

There are a couple options for dealing with this. For example, you could include the JavaScript library prefixfree.js to deal with it. The idea of -prefix-free is that you write your CSS rules the way they’re supposed to look after all browsers implement a standard –  non-prefixed. I really like this idea. The thought of just writing code the way it should work and not having to worry about all the ins and outs of actual implementation are great.

class-header-css3However I had trouble resolving some issues with this and flexbox on IE10. This says more about IE10 having a weird “tweener” flexbox syntax than an issue with -prefix-free. Plus, -prefix-free is used on a lot of properties, not just flexbox. So if you only want flexbox, there’s another way.

I’m a believer in CSS “replacements” such as LESS or SASS. These systems suit my developer brain more than raw CSS does. I want to be able to write a flexbox command and not have to worry about its implementation in CSS. Enter Mixins. I’ve written a set of LESS mixins that abstract the details about each flexbox property.

You can play with a live version of it on Codepen.

So far, there’s basic support for:

display:flex, flex-direction, align-items, align-self, order flex-wrap

There’s certainly some pieces missing so please contribute to the files on GitHub it to help complete the set.

 

Links: