col


纵向flex布局容器

<row> 组件结合使用,可快速构建整洁干净的flex布局。

属性

属性名类型必填默认值说明
widthNumber0容器宽度,值为0时容器宽度由内部元素宽度决定
heightNumber0容器高度,值为0时容器高度由内部元素高度决定
background-colorString容器背景色
marginNumber0容器左右间隔(单位cpx)

示例

  1. <template>
  2. <row margin="{{100}}" height="{{100}}">
  3. <col margin="{{50}}">
  4. <view class="col-item"></view>
  5. </col>
  6. <col margin="{{50}}">
  7. <view class="col-item"></view>
  8. </col>
  9. <col margin="{{50}}">
  10. <view class="col-item"></view>
  11. </col>
  12. </row>
  13. </template>
  14. <script>
  15. class Col {
  16. }
  17. export default new Col();
  18. </script>
  19. <style scoped>
  20. .col-item {
  21. background: #aaa;
  22. width:200cpx;
  23. height:100cpx;
  24. }
  25. </style>
  26. <script cml-type="json">
  27. {
  28. "base": {}
  29. }
  30. </script>

col  - 图1wx

col  - 图2web

col  - 图3native

查看完整示例