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. }
  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>
  59. <script cml-type="json">
  60. {
  61. "base": {}
  62. }
  63. </script>