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?
However 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.