flex.less

Less mixins for flexbox layouts.

Usage no npm install needed!

<script type="module">
  import flexLess from 'https://cdn.skypack.dev/flex.less';
</script>

README

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