wxc-flex

MinUI 小程序组件 - flex

Install

  1. $ min install @minui/wxc-flex

Demos

常见布局 - 水平垂直居中

flex flex - 图1

  1. <template>
  2.   <wxc-flex class="wrap" main="center" cross="center">
  3.     <view class="item"></view>
  4.     <view class="item"></view>
  5.   </wxc-flex>
  7.   <view class="layout-code">
  8.     ＜wxc-flex <view class="layout-code__point">main="center" cross="center"</view>＞...＜/wxc-flex＞
  9.   </view>
  10. </template>
  12. <script>
  13. export default {
  14.   config: {
  15.     usingComponents: {
  16.       'wxc-flex': '@minui/wxc-flex'
  17.     }
  18.   },
  19.   data: {},
  20.   methods: {}
  21. }
  22. </script>
  24. <style>
  25.   .wrap {
  26.     display: block;
  27.     height: 300rpx;
  28.     padding: 10rpx;
  29.     background: #696969;
  30.   }
  31.   .item {
  32.     min-width: 100rpx;
  33.     min-height: 100rpx;
  34.   }
  35.   .item:nth-of-type(odd) {
  36.     background: #afdde3
  37.   }
  38.   .item:nth-of-type(2n) {
  39.     background: #f397b2
  40.   }
  42.   .layout-code {
  43.     padding: 15rpx;
  44.     background: #222222;
  45.     color: #FFFFFF;
  46.     font-size: 20rpx;
  47.     font-family: Monaco;
  48.   }
  49.   .layout-code__point {
  50.     display: inline-block;
  51.     padding: 0 5rpx;
  52.     background: #444444;
  53.   }
  54. </style>

交叉轴排列

项目在交叉轴上如何对齐

flex flex - 图2

  1. <template>
  2.   <wxc-flex class="wrap" cross="{{cross}}">
  3.     <view class="item">栏 1</view>
  4.     <view class="item">栏 2</view>
  5.     <view class="item">栏 3</view>
  6.   </wxc-flex>
  8.   <view class="layout-code">
  9.     ＜wxc-flex <view class="layout-code__point">cross="{{cross}}"</view>＞...＜/wxc-flex＞
  10.   </view>
  12.   <view class="setting-button" bindtap="setCrossToStretch">拉伸铺满(默认)</view>
  13.   <view class="setting-button" bindtap="setCrossToStart">启点排列</view>
  14.   <view class="setting-button" bindtap="setCrossToEnd">终点排列</view>
  15.   <view class="setting-button" bindtap="setCrossToCenter">居中对齐</view>
  16.   <view class="setting-button" bindtap="setCrossToBaseline">基线对齐</view>
  17. </template>
  19. <script>
  20. export default {
  21.   config: {
  22.     usingComponents: {
  23.       'wxc-flex': '@minui/wxc-flex'
  24.     }
  25.   },
  26.   data: {
  27.     cross: 'stretch'
  28.   },
  29.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  30.   methods: {
  31.     setCrossToStretch: function () {
  32.       this.setData({
  33.         cross: 'stretch'
  34.       })
  35.     },
  36.     setCrossToStart: function () {
  37.       this.setData({
  38.         cross: 'start'
  39.       })
  40.     },
  41.     setCrossToEnd: function () {
  42.       this.setData({
  43.         cross: 'end'
  44.       })
  45.     },
  46.     setCrossToCenter: function () {
  47.       this.setData({
  48.         cross: 'center'
  49.       })
  50.     },
  51.     setCrossToBaseline: function () {
  52.       this.setData({
  53.         cross: 'baseline'
  54.       })
  55.     }
  56.   }
  57. }
  58. </script>
  60. <style>
  61.   .wrap {
  62.     display: block;
  63.     height: 300rpx;
  64.     padding: 10rpx;
  65.     background: #696969;
  66.   }
  67.   .item {
  68.     min-width: 100rpx;
  69.     min-height: 100rpx;
  70.     font-size: 22rpx;
  71.     text-align: center;
  72.   }
  73.   .item:nth-of-type(odd) {
  74.     line-height: 30rpx;
  75.     background: #afdde3
  76.   }
  77.   .item:nth-of-type(2n) {
  78.     line-height: 50rpx;
  79.     background: #f397b2
  80.   }
  82.   .setting-button {
  83.     display: inline-block;
  84.     line-height: 50rpx;
  85.     margin: 20rpx 10rpx 0 0;
  86.     padding: 2rpx 20rpx;
  87.     border-radius: 6rpx;
  88.     background: #31b0d5;
  89.     color: #ffffff;
  90.     font-size: 18rpx;
  91.     text-align: center;
  92.   }
  94.   .layout-code {
  95.     padding: 15rpx;
  96.     background: #222222;
  97.     color: #FFFFFF;
  98.     font-size: 20rpx;
  99.     font-family: Monaco;
  100.   }
  101.   .layout-code__point {
  102.     display: inline-block;
  103.     padding: 0 5rpx;
  104.     background: #444444;
  105.   }
  106. </style>

主轴方向

项目的排列方向

flex flex - 图3

  1. <template>
  2.   <wxc-flex class="wrap" dir="{{dir}}">
  3.     <view class="item">栏 1</view>
  4.     <view class="item">栏 2</view>
  5.     <view class="item">栏 3</view>
  6.   </wxc-flex>
  8.   <view class="layout-code">
  9.     ＜wxc-flex <view class="layout-code__point">dir="{{dir}}"</view>＞...＜/wxc-flex＞
  10.   </view>
  12.   <view class="setting-button" bindtap="setDirToLeft">水平正序(默认)</view>
  13.   <view class="setting-button" bindtap="setDirToRight">水平倒序</view>
  14.   <view class="setting-button" bindtap="setDirToTop">垂直正序</view>
  15.   <view class="setting-button" bindtap="setDirToBottom">垂直倒序</view>
  16. </template>
  18. <script>
  19. export default {
  20.   config: {
  21.     usingComponents: {
  22.       'wxc-flex': '@minui/wxc-flex'
  23.     }
  24.   },
  25.   data: {
  26.     dir: 'left'
  27.   },
  28.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  29.   methods: {
  30.     setDirToLeft: function () {
  31.       this.setData({
  32.         dir: 'left'
  33.       })
  34.     },
  35.     setDirToRight: function () {
  36.       this.setData({
  37.         dir: 'right'
  38.       })
  39.     },
  40.     setDirToTop: function () {
  41.       this.setData({
  42.         dir: 'top'
  43.       })
  44.     },
  45.     setDirToBottom: function () {
  46.       this.setData({
  47.         dir: 'bottom'
  48.       })
  49.     }
  50.   }
  51. }
  52. </script>
  54. <style>
  55.   .wrap {
  56.     display: block;
  57.     padding: 10rpx;
  58.     background: #696969;
  59.   }
  60.   .item {
  61.     min-width: 100rpx;
  62.     min-height: 100rpx;
  63.     font-size: 22rpx;
  64.     text-align: center;
  65.   }
  66.   .item:nth-of-type(odd) {
  67.     line-height: 30rpx;
  68.     background: #afdde3
  69.   }
  70.   .item:nth-of-type(2n) {
  71.     line-height: 50rpx;
  72.     background: #f397b2
  73.   }
  75.   .setting-button {
  76.     display: inline-block;
  77.     line-height: 50rpx;
  78.     margin: 20rpx 10rpx 0 0;
  79.     padding: 2rpx 20rpx;
  80.     border-radius: 6rpx;
  81.     background: #31b0d5;
  82.     color: #ffffff;
  83.     font-size: 18rpx;
  84.     text-align: center;
  85.   }
  87.   .layout-code {
  88.     padding: 15rpx;
  89.     background: #222222;
  90.     color: #FFFFFF;
  91.     font-size: 20rpx;
  92.     font-family: Monaco;
  93.   }
  94.   .layout-code__point {
  95.     display: inline-block;
  96.     padding: 0 5rpx;
  97.     background: #444444;
  98.   }
  99. </style>

常见布局 - 定宽+弹性宽度

flex flex - 图4

  1. <template>
  2.   <wxc-flex class="wrap">
  3.     <view class="item side">固定宽度</view>
  4.     <view class="item main">弹性宽度</view>
  5.   </wxc-flex>
  6. </template>
  8. <script>
  9. export default {
  10.   config: {
  11.     usingComponents: {
  12.       'wxc-flex': '@minui/wxc-flex'
  13.     }
  14.   },
  15.   data: {},
  16.   methods: {}
  17. }
  18. </script>
  20. <style>
  21.   .wrap {
  22.     display: block;
  23.     height: 300rpx;
  24.     background: #696969;
  25.   }
  26.   .item {
  27.     font-size: 20rpx;
  28.     line-height: 300rpx;
  29.     text-align: center;
  30.   }
  31.   .side {
  32.     width: 200rpx;
  33.     background: #afdde3;
  34.     flex-grow: 0;
  35.   }
  36.   .main {
  37.     background: #f397b2;
  38.     flex-grow: 1;
  39.   }
  40. </style>

常见布局 - 列表

flex flex - 图5

  1. <template>
  2.   <wxc-flex class="wrap" cross="top" wrap="wrap">
  3.     <view class="item"></view>
  4.     <view class="item"></view>
  5.     <view class="item"></view>
  6.     <view class="item"></view>
  7.     <view class="item"></view>
  8.   </wxc-flex>
  9. </template>
  11. <script>
  12. export default {
  13.   config: {
  14.     usingComponents: {
  15.       'wxc-flex': '@minui/wxc-flex'
  16.     }
  17.   },
  18.   data: {},
  19.   methods: {}
  20. }
  21. </script>
  23. <style>
  24.   .wrap {
  25.     display: block;
  26.     padding: 2%;
  27.     background: #696969;
  28.   }
  29.   .item {
  30.     width: 47%;
  31.     height: 348rpx;
  32.     margin: 1.5%;
  33.     flex-grow: 0;
  34.   }
  35.   .item:nth-of-type(odd) {
  36.     background: #afdde3
  37.   }
  38.   .item:nth-of-type(2n) {
  39.     background: #f397b2
  40.   }
  41. </style>

主轴排列

项目在主轴上的对齐方式

flex flex - 图6

<template>
  <wxc-flex class="wrap" main="{{main}}">
    <view class="item">栏 1</view>
    <view class="item">栏 2</view>
    <view class="item">栏 3</view>
  </wxc-flex>

  <view class="layout-code">
    ＜wxc-flex <view class="layout-code__point">main="{{main}}"</view>＞...＜/wxc-flex＞
  </view>

  <view class="setting-button" bindtap="setMainToStart">启点排列(默认)</view>
  <view class="setting-button" bindtap="setMainToEnd">终点排列</view>
  <view class="setting-button" bindtap="setMainToBetween">两端对齐</view>
  <view class="setting-button" bindtap="setMainToCenter">居中对齐</view>
  <view class="setting-button" bindtap="setMainToAround">等间分布</view>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-flex': '@minui/wxc-flex'
    }
  },
  data: {
    main: 'left'
  },
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    setMainToStart: function () {
      this.setData({
        main: 'start'
      })
    },
    setMainToEnd: function () {
      this.setData({
        main: 'end'
      })
    },
    setMainToBetween: function () {
      this.setData({
        main: 'between'
      })
    },
    setMainToCenter: function () {
      this.setData({
        main: 'center'
      })
    },
    setMainToAround: function () {
      this.setData({
        main: 'around'
      })
    }
  }
}
</script>

<style>
  .wrap {
    display: block;
    padding: 10rpx;
    background: #696969;
  }
  .item {
    min-width: 100rpx;
    min-height: 100rpx;
    font-size: 22rpx;
    text-align: center;
  }
  .item:nth-of-type(odd) {
    line-height: 30rpx;
    background: #afdde3
  }
  .item:nth-of-type(2n) {
    line-height: 50rpx;
    background: #f397b2
  }

  .setting-button {
    display: inline-block;
    line-height: 50rpx;
    margin: 20rpx 10rpx 0 0;
    padding: 2rpx 20rpx;
    border-radius: 6rpx;
    background: #31b0d5;
    color: #ffffff;
    font-size: 18rpx;
    text-align: center;
  }

  .layout-code {
    padding: 15rpx;
    background: #222222;
    color: #FFFFFF;
    font-size: 20rpx;
    font-family: Monaco;
  }
  .layout-code__point {
    display: inline-block;
    padding: 0 5rpx;
    background: #444444;
  }
</style>

换行选项

如果一条轴线排不下，如何换行

flex flex - 图7

<template>
  <wxc-flex class="wrap" wrap="{{wrap}}">
    <view class="item">栏 1</view>
    <view class="item">栏 2</view>
    <view class="item">栏 3</view>
    <view class="item">栏 4</view>
    <view class="item">栏 5</view>
    <view class="item">栏 6</view>
    <view class="item">栏 7</view>
    <view class="item">栏 8</view>
    <view class="item">栏 9</view>
    <view class="item">栏 10</view>
    <view class="item">栏 11</view>
    <view class="item">栏 12</view>
  </wxc-flex>

  <view class="layout-code">
    ＜wxc-flex <view class="layout-code__point">wrap="{{wrap}}"</view>＞...＜/wxc-flex＞
  </view>

  <view class="setting-button" bindtap="setWrapToNowrap">不换行(默认)</view>
  <view class="setting-button" bindtap="setWrapToWrap">正序换行</view>
  <view class="setting-button" bindtap="setWrapToReverse">倒序换行</view>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-flex': '@minui/wxc-flex'
    }
  },
  data: {
    wrap: 'nowrap'
  },
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    setWrapToNowrap: function () {
      this.setData({
        wrap: 'nowrap'
      })
    },
    setWrapToWrap: function () {
      this.setData({
        wrap: 'wrap'
      })
    },
    setWrapToReverse: function () {
      this.setData({
        wrap: 'reverse'
      })
    }
  }
}
</script>

<style>
  .wrap {
    display: block;
    padding: 10rpx;
    background: #696969;
  }
  .item {
    min-width: 20%;
    min-height: 100rpx;
    font-size: 22rpx;
    text-align: center;
  }
  .item:nth-of-type(odd) {
    line-height: 30rpx;
    background: #afdde3
  }
  .item:nth-of-type(2n) {
    line-height: 50rpx;
    background: #f397b2
  }

  .setting-button {
    display: inline-block;
    line-height: 50rpx;
    margin: 20rpx 10rpx 0 0;
    padding: 2rpx 20rpx;
    border-radius: 6rpx;
    background: #31b0d5;
    color: #ffffff;
    font-size: 18rpx;
    text-align: center;
  }

  .layout-code {
    padding: 15rpx;
    background: #222222;
    color: #FFFFFF;
    font-size: 20rpx;
    font-family: Monaco;
  }
  .layout-code__point {
    display: inline-block;
    padding: 0 5rpx;
    background: #444444;
  }
</style>

API

Flex【props】

名称描述
dir主轴方向。取值范围: - left：水平正序(默认) - right：水平倒序 - top：垂直正序 - bottom：垂直倒序
main主轴对齐方式。取值范围: - start：启点排列(默认) - end：终点排列 - between：两端对齐 - center：居中对齐 - around：等间分布
cross交叉轴对齐方式。取值范围： - stretch：拉伸铺满(默认) - start：启点排列 - end：终点排列 - center：居中对齐 - baseline：基线对齐
wrap换行设置。取值范围： - nowrap：不换行(默认) - wrap：正序换行 - reverse：倒序换行
bind:click点击事件。组件带 slot 时，在组件中使用事件点击到 slot 会报错，绑定事件请用该自定义事件。
地址
flex 组件文档 https://meili.github.io/min/docs/minui/index.html#flex
flex 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-flex
MinUI 组件库 https://github.com/meili/minui

Preview

flex

ChangeLog

v1.0.3（2018.6.5）

  • 增加点击事件。

v1.0.2（2017.11.02）

  • update .npmignore

v1.0.1（2017.10.24）

  • 初始版本