wevue-flexbox
Vue.js 2.0和Wevue.js 2的Flexbox组件,基于flex.css
npm
例子 (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>
API
flexbox attributes
属性名 Attr.name | 描述 Description | 必需 Required | 默认值 Default value |
dir | 主轴方向 | N | left |
main | 主轴对齐方式 | N | - |
cross | 交叉轴对齐方式 | N | - |
box | 子元素设置 | N | - |
flexbox-box attributes
属性名 Attr.name | 描述 Description | 必需 Required | 默认值 Default value |
size | 子元素尺寸(取值范围(0-10),单独设置子元素多余空间的如何分配,设置为0,则子元素不占用多余的多余空间 多余空间分配 = 当前box值/子元素的box值相加之和) | N | - |
flexbox 属性可选值
dir
top:从上到下
right:从右到左
bottom:从下到上
left:从左到右(默认)
main
right:从右到左
left:从左到右
justify:两端对齐
center:居中对齐
cross
top:从上到下
bottom:从下到上
baseline:跟随内容高度对齐
center:居中对齐
stretch:高度并排铺满
box
mean:子元素平分空间
first:第一个子元素不要多余空间,其他子元素平分多余空间
last:最后一个子元素不要多余空间,其他子元素平分多余空间
justify:两端第一个元素不要多余空间,其他子元素平分多余空间