wxc-flex

    常见布局 - 水平垂直居中

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

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

    flex flex - 图4

    常见布局 - 列表

    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" 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>

    Flex【props】

    地址
    flex 组件文档 https://meili.github.io/min/docs/minui/index.html#flex
    flex 组件源码
    MinUI 组件库 https://github.com/meili/minui

    flex

    v1.0.3（2018.6.5）

    • 增加点击事件。

    v1.0.2（2017.11.02）

    • update .npmignore

    v1.0.1（2017.10.24）