cssobj-plugin-flexbox
v1.0.2
Published
cssobj plugin for generate right flexbox CSS, auto vendor prefixer for flexbox in browser, input one line, give you right flexbox!
Downloads
13
Readme
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