mmillet / flexbox.less

Use Flexbox CSS Today! LESS mixins to maximize browser compatibility!

Flexbox.less

CSS Flexbox mixins for LESS that adds back-compatibility for the 2009 syntax

All mixins use the latest flexbox syntax and merely add additional properties in the original syntax for you, as well as browser prefixes.

Demo

Checkout this demo page in different browsers.

Why?

Combining 2009 and Edge syntaxes will give you the greatest browser support coverage!

The old 2009 syntax has surprisingly good browser "support": Chrome, Firefox 2+, Safari 3.1+... Pretty much everything except IE 9- and Opera anything. I say "support" because the actual implementations were partial and differed a bit (hence the re-write).

Despite more support, it's not smart to be using the older syntax. The old spec is gone with the wind. Browsers might drop support for the old syntax in the future. At the least, it's very likely the new syntax is easier to understand and will be implemented more deeply and more consistently. Browsers that don't yet support Flexbox will implement the new spec, which is in "CR" (Candidate Recommendation) status.

New syntax support is: Chrome 21+, Opera (& Opera Mobile) 12.1+, and Blackberry 10+.

- Chris Coyier

References

• CanIUse.com browser-coverage
• Official Spec
• Mozilla Documentation on Flexbox
• Paul Irish / HTML5 Rocks
• Chris Coyier / Old vs New flexbox
• Designing CSS Layouts With Flexbox is as Easy as Pie
• Flexible Box Layout Module 2009 Spec
• Advanced Cross-Browser Flexbox

Contribute

I will slowly be adding every flexbox property as I find a few spare minutes here and there. But if you are impatient and want a specific property added, feel free to open a Pull Request. Please try to add backwards-compatibility properties for the 2009 syntax to add a much larger range of browser support.

Values aren't always identical across syntaxes, in which case you can use .flex-direction() as an example of how to accomplish this.

Conflicts

At this time, I'm unaware of any problems that may arise from using both the old and new syntax side by side in this manner. If you find problems, feel free to open an issue, just be sure to provide the browser version number.

TODO List

• align-content (pending)
• align-items (pending)
• align-self (pending)
• flex-basis (pending)
• flex-flow (pending)
• flex-grow (pending)
• flex-shrink (pending)
• justify-content (pending)

License

WTFPL