codio/flex.less

A set of Less mixins for working with CSS3 Flex layouts

Flex.Less

A less mixin for flexbox.

Available Mixins

The mixin names and their values correspond to the official draft.

• display
• justify-content
• align-items
• align-self
• align-content
• order
• flex
• flex-grow
• flex-shrink
• flex-basis
• flex-direction
• flex-wrap
• flex-flow

Browser Compatability

In Firefox < 22 you need to add the following snippet to every element that you set display: flex.

/*
 * Legacy Firefox implementation treats all flex containers
 * as inline-block elements.
 */
@-moz-document url-prefix() {
    #selector {
        width: 100%;
        -moz-box-sizing: border-box;
    }
}

Sources

• Official W3C Editor's Draft
• Centering Elements with Flexbox from Smashing Magazine

flex.less's Issues

Version 1.1.0 does not release to bower

flex.less in phone have some bug

Are you in the phone's browser to test it, the phone does not support the latest to standards, have problems in your code！ I can be on the computer, but the phone, there is a big problem,Can you help me ? why??

Bower

Hi, can we expose this over bower?

Readme.md bug

The last mixin name "flex-grow" should be "flex-flow"