https://github.com/cssobj/cssobj-plugin-flexbox
cssobj plugin for generate right flexbox CSS, input one line, give you right flexbox!
https://github.com/cssobj/cssobj-plugin-flexbox
Last synced: about 1 month ago
JSON representation
cssobj plugin for generate right flexbox CSS, input one line, give you right flexbox!
- Host: GitHub
- URL: https://github.com/cssobj/cssobj-plugin-flexbox
- Owner: cssobj
- License: mit
- Created: 2016-10-17T16:06:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-14T08:03:03.000Z (over 9 years ago)
- Last Synced: 2025-07-11T03:26:49.041Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cssobj-plugin-flexbox
[](https://gitter.im/css-in-js/cssobj) [](https://circleci.com/gh/cssobj/cssobj-plugin-flexbox) [](https://codecov.io/gh/cssobj/cssobj-plugin-flexbox)
[cssobj](https://github.com/cssobj/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](https://github.com/postcss/autoprefixer) as support tool, generate both [flexbox 2009 spec](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) and [flexbox 2012 spec](http://www.w3.org/TR/css3-flexbox) 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](https://github.com/cssobj/cssobj-plugin-flexbox/blob/master/test/test.js) 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
### option.define [object]
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](https://github.com/cssobj/cssobj-plugin-replace)