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

`` bash
npm install cssobj-plugin-flexbox
`

- bower

` bash
bower install cssobj-plugin-flexbox
`

Usage

` javascript
var flexbox = require('cssobj-plugin-flexbox')

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

result css:

` 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

$3

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

Example:

` javascript
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:

`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