cssobj-plugin-flexbox

cssobj plugin for generate right flexbox CSS, auto vendor prefixer for flexbox in browser, input one line, give you right flexbox!

The lib using autoprefixer as support tool, generate both flexbox 2009 spec and flexbox 2012 spec result.

Currently hook below css props:

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

For the transformed CSS, please look up the test result.

Install

• npm

npm install cssobj-plugin-flexbox

• bower

bower install cssobj-plugin-flexbox

Usage

var flexbox = require('cssobj-plugin-flexbox')
 
var cssobj(
  {
    div: {
      display: 'flex',
      alignItems: 'flex-end',
      border: none;
    }
  },
  {
    plugins: [flexbox()]
  }
)

result css:

div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
  -webkit-box-align: end;
  -moz-box-align: end;
  align-items: flex-end;
  border: none;
}

Option

option.define [object]

Redefine any css property, as value function that return an object, to replace the original property.

Example:

var cssobj(
  {
    div: {
      display: 'flex',
      alignItems: 'end',
      border: none;
    }
  },
  {
    plugins: [flexbox({
      // below redefine alignItems, and add new border replacement.
      define:{
        alignItems: function(value){ return {align: 'flex-'+value} },
        border: function(value){ return {color:value} }
      }
    })]
  }
)
 

result css:

div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align: flex-end;
  color: none;
}

Also, please take a look at cssobj-plugin-replace