当前位置: 首页 > 文档资料 > VUX 中文文档 >

Flexbox 组件使用教程

优质
小牛编辑
130浏览
2023-12-01

安装

import { Flexbox, FlexboxItem } from 'vux'

export default {
  components: {
    Flexbox,
    FlexboxItem
  }
}
// 在入口文件全局引入

import Vue from 'vue'
import { Flexbox, FlexboxItem } from 'vux'

Vue.component('flexbox', Flexbox)
Vue.component('flexbox-item', FlexboxItem)

属性

名字类型默认值说明版本要求
gutternumber8间隙像素大小(px)--
orientstringhorizontal排布方向,可选['horizontal', 'vertical']--
justifystringflexjustify-content属性--
alignstringflexalign-items属性--
wrapstringflexflex-wrap属性--
directionstringflexflex-direction属性--

插槽

名字说明版本要求
默认插槽flexbox-item的内容插槽--

属性

名字类型默认值说明版本要求
spannumber占用宽度,如果不设置,所有flexbox-item将平分--
orderstringflexorder属性--

插槽

名字说明版本要求
默认插槽内容插槽--