Wevue-flexbox NPM

wevue-flexbox

Vue.js 2.0和Wevue.js 2的Flexbox组件,基于flex.css

同时适用于 wevue 组件和 vue 单文件组件

npm

npm wevue-flex

例子 (Demo)

flex.css官方demo

用法 (How to use)

Vue.js用法

安装 (npm install)

npm i wevue-flexbox --save  //Vue.js
cd wevue_project && wevue add wevue-flexbox  //Wevue.js

引用 (require)

//Vue component
import {Flexbox,FlexboxItem} from 'wevue-flexbox'
Vue.component('flexbox',Flexbox)
Vue.component('flexbox-item',FlexboxItem) 
//Vue plugin
import WevueFlexbox from 'wevue-flexbox'
//or
var WevueFlexbox = require('wevue-flexbox')
//use
Vue.use(WevueFlexbox)

使用 (example)

<flexbox style="height:100px;" main="left" dir="top" box="mean">
    <flexbox-item style="background:red;" size="3">
        1
    </flexbox-item>
    <flexbox-item style="background:blue;" size="3">
        2
    </flexbox-item>
    <flexbox-item style="background:green;" size="4">
        3
    </flexbox-item>
</flexbox>