Manage Flexbox in Sass easily.
CSS
Latest commit 273e9cc Dec 11, 2016 @zessx Fix #2 - Create npm package

README.md

SassFlexbox

Sass Flexbox logo

Manage Flexbox in Sass easily.

Configuration

Put sass-flexbox.scss file in your project, and include it via your Sass manifest:

@import "helpers/sass-flexbox";

Usage

SassFlexbox comes with a bunch of placeholders and mixins to helps you using Flexbox, without carrying of vendor prefixes. Mixins attempt to use placeholders as soon as possible, to avoid extra compiled code.

Display

  • %display-flex
  • %display-flex-inline
  • display-flex()
  • display-flex-inline()

Flex direction

  • %flex-direction-row
  • %flex-direction-row-reverse
  • %flex-direction-column
  • %flex-direction-column-reverse
  • %flex-direction-inherit
  • flex-direction($direction)

Flex wrap

  • %flex-wrap-nowrap
  • %flex-wrap-wrap
  • %flex-wrap-wrap-reverse
  • %flex-wrap-inherit
  • flex-wrap($wrap)

Flex flow

  • flex-flow($direction, $wrap)

Order

  • order($order)

Flex grow

  • flex-grow($grow)

Flex shrink

  • flex-shrink($shrink)

Flex basis

  • flex-basis($basis)

Flex

  • flex($grow, $shrink, $basis)

Justify content

  • %justify-content-flex-start
  • %justify-content-flex-end
  • %justify-content-center
  • %justify-content-space-between
  • %justify-content-space-around
  • %justify-content-inherit
  • justify-content($justify)

Align items

  • %align-items-flex-start
  • %align-items-flex-end
  • %align-items-center
  • %align-items-baseline
  • %align-items-stretch
  • %align-items-inherit
  • align-items($align)

Align self

  • %align-self-auto
  • %align-self-flex-start
  • %align-self-flex-end
  • %align-self-center
  • %align-self-baseline
  • %align-self-stretch
  • %align-self-inherit
  • align-self($align)

Align content

  • %align-content-flex-start
  • %align-content-flex-end
  • %align-content-center
  • %align-content-space-between
  • %align-content-space-around
  • %align-content-stretch
  • %align-content-inherit
  • align-content($align)

Sources