Flex

flex 布局。

引入

import { Flex, FlexItem } from 'we-vue'

Vue.use(Flex).use(FlexItem)
1
2
3

WARNING

flex 需要与 flex-item 配合使用

例子

基本示例

<wv-flex>
  <wv-flex-item>
    <div class="placeholder"></div>
  </wv-flex-item>
</wv-flex>
1
2
3
4
5

指定间距,两列等宽

<wv-flex :gutter="10">
  <wv-flex-item>
    <div class="placeholder">1/2</div>
  </wv-flex-item>
  <wv-flex-item>
    <div class="placeholder">1/2</div>
  </wv-flex-item>
</wv-flex>
1
2
3
4
5
6
7
8

三列等宽

<wv-flex :gutter="10">
  <wv-flex-item>
    <div class="placeholder">1/3</div>
  </wv-flex-item>
  <wv-flex-item>
    <div class="placeholder">1/3</div>
  </wv-flex-item>
  <wv-flex-item>
    <div class="placeholder">1/3</div>
  </wv-flex-item>
</wv-flex>
1
2
3
4
5
6
7
8
9
10
11

三列不等宽

<wv-flex :gutter="10">
  <wv-flex-item>
    <div class="placeholder">1/4</div>
  </wv-flex-item>
  <wv-flex-item flex="2">
    <div class="placeholder">1/2</div>
  </wv-flex-item>
  <wv-flex-item>
    <div class="placeholder">1/4</div>
  </wv-flex-item>
</wv-flex>
1
2
3
4
5
6
7
8
9
10
11

offset

flex-item offset 属性接受一个 String 类型的值,表示对应 fle-item 的 margin-left

<wv-flex :gutter="10">
  <wv-flex-item>
    <div class="placeholder">1/4</div>
  </wv-flex-item>
  <wv-flex-item flex="2">
    <div class="placeholder">1/2</div>
  </wv-flex-item>
  <wv-flex-item>
    <div class="placeholder">1/4</div>
  </wv-flex-item>
</wv-flex>
1
2
3
4
5
6
7
8
9
10
11

API

  • flex
参数 类型 说明 可选值 默认值
gutter Number 列间距 0
  • flex-item
参数 类型 说明 可选值 默认值
flex Number/String 相当于 CSS3 中 flex 属性 1
offset String 指定 flex-item margin-left
中国联通
20.45