col

flex布局列容器

示例

  1. <template>
  2.   <view class="container">
  3.     <row margin="{{100}}">
  4.       <view class="col-item"></view>
  5.       <view class="col-item"></view>
  6.       <view class="col-item"></view>
  7.     </row>
  8.     <row margin="{{100}}" height="{{200}}">
  9.       <col width="{{50}}" height="{{100}}" background-color="#ddd" margin="{{20}}">
  10.         <view></view>
  11.       </col>
  12.       <col  width="{{100}}" height="{{100}}" background-color="#bbb" margin="{{20}}">
  13.         <view></view>
  14.       </col>
  15.       <col  width="{{200}}" height="{{100}}" background-color="#aaa" margin="{{20}}">
  16.         <view></view>
  17.       </col>
  18.     </row>
  19.     <row margin="{{100}}" height="{{100}}">
  20.       <col margin="{{50}}">
  21.         <view class="col-item-2"></view>
  22.       </col>
  23.       <col margin="{{50}}">
  24.         <view class="col-item-2"></view>
  25.       </col>
  26.       <col margin="{{50}}">
  27.         <view class="col-item-2"></view>
  28.       </col>
  29.     </row>
  30.   </view>
  31. </template>
  32. <script>
  33. class Row {
  34.   data = {
  35.   }
  36. }
  37. export default new Row();
  38. </script>
  39. <style scoped>
  40. .container {
  41.   position: absolute;
  42.   top: 88cpx;
  43.   left: 0;
  44.   right: 0;
  45.   bottom: 0;
  46. }
  47. .col-item {
  48.   background: #ccc;
  49.   width:200cpx;
  50.   height:100cpx;
  51.   margin:0 10cpx;
  52. }
  53. .col-item-2 {
  54.   background: #aaa;
  55.   width:200cpx;
  56.   height:100cpx;
  57. }
  58. </style>
  60. <script cml-type="json">
  61. {
  62.   "base": {}
  63. }
  64. </script>