Vue-flexbox-layout NPM

vue-flexbox-layout

flex 布局的 vue 插件

Installation

npm install vue-flexbox-layout
//or
yarn add vue-flexbox-layout

Usage

import Vue from 'vue'
import VueFlexboxLayout from 'vue-flexbox-layout'


import 'vue-flexbox-layout/lib/vue-flexbox-layout.css' //2.0+将css分离为单个文件
// or
import 'vue-flexbox-layout/lib/vue-flexbox-layout.scss' //3.0+


Vue.use(VueFlexboxLayout)

<Flex justify="center" :gutter="10">
  <FlexItem>固定</FlexItem>
  <FlexItem :flex="1">撑开</FlexItem>
</Flex>

Api

flex

Prop	Value	Type	Default
direction	`row` , `row-reverse` , `column` , `column-reverse`	string	`row`
wrap	`nowrap` , `wrap` , `wrap-reverse`	string	`nowrap`
justify	`start` , `end` , `center` , `between` , `around`	string	`start`
align	`start` , `end` , `center` , `baseline` , `stretch`	string	`center`
alignContent	`start` , `end` , `center` , `between` , `around` , `stretch`	string	`stretch`
gutter	`0`, 可以是带单位的长度值（px\|em\|rem\|vw\|%）	string \| number	`0`