row

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.   }
  38.   export default new Row();
  40. </script>
  42. <style scoped>
  43. .container {
  44.   position: absolute;
  45.   top: 88cpx;
  46.   left: 0;
  47.   right: 0;
  48.   bottom: 0;
  49. }
  50. .col-item {
  51.   background: #ccc;
  52.   width:200cpx;
  53.   height:100cpx;
  54.   margin:0 10cpx;
  55. }
  56. .col-item-2 {
  57.   background: #aaa;
  58.   width:200cpx;
  59.   height:100cpx;
  60. }
  61. </style>
  63. <script cml-type="json">
  64. {
  65.   "base": {}
  66. }
  67. </script>