Flex 布局 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

布局控件
通过 flex 布局来对页面组成部分进行灵活的对齐。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {Flex, FlexItem} from '@21cnfe/vui'  
Vue.component('Flex', Flex)  
Vue.component('FlexItem', FlexItem)

Flex 布局 flexes

定位方向：direction 可选值 row，row-reverse，column，column-reverse，默认为 row

<Flex direction="row-reverse"></Flex>

换行方式：wrap 可选值 nowrap，wrap，wrap-reverse，默认为 nowrap

<Flex wrap="wrap"></Flex>

主轴对齐方式：justify 可选值 start，end，center，between，around，默认为 start

<Flex justify="center"></Flex>

交叉轴对齐方式：align 可选值 start，center，end，baseline，stretch，默认为 center

<Flex align="start"></Flex>

多根轴线对齐方式：alignContent 可选值 start，end，center，between，around，stretch，默认为 stretch

<Flex alignContent="start"></Flex>

FlexItem 添加了属性flex:1，保证所有item平均分宽度， Flex 容器的children不一定是 Flex.Item

<Flex>
  <FlexItem></FlexItem>
  <FlexItem></FlexItem>
</Flex>

属性	说明	类型	默认值
`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`,`center`,`end`,`baseline`,`stretch`	String	`center`
`alignContent`	有多根轴线时的对齐方式，可选`start`,`end`,`center`,`between`,`around`,`stretch`	String	`stretch`

Flex.Item 组件默认加上了样式flex:1，保证所有item平均分宽度， Flex 容器的children不一定是 Flex.Item