Flex

flex 布局。

引入

  1. import { Flex, FlexItem } from 'we-vue'
  2. Vue.use(Flex).use(FlexItem)

WARNING

flex 需要与 flex-item 配合使用

例子

基本示例

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

指定间距,两列等宽

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

三列等宽

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

三列不等宽

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

offset

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

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

API

  • flex

    参数类型说明可选值默认值
    gutterNumber列间距0
  • flex-item

    参数类型说明可选值默认值
    flexNumber/String相当于 CSS3 中 flex 属性1
    offsetString指定 flex-item margin-left