graceNvueFlex.vue 704 B

1234567891011121314151617181920212223242526272829
  1. <template>
  2. <view :class="classes"><slot></slot></view>
  3. </template>
  4. <script>
  5. export default{
  6. props:{
  7. classes : {
  8. type : Array,
  9. default : function(){
  10. return new Array()
  11. }
  12. }
  13. }
  14. }
  15. </script>
  16. <style scoped>
  17. .row{flex-direction:row;}
  18. .column{flex-direction:column;}
  19. .wrap{flex-direction:row; flex-wrap:wrap;}
  20. .xreverse{flex-direction:row-reverse;}
  21. .nowrap{flex-direction:row; flex-wrap:nowrap;}
  22. .space-between{flex-direction:row; justify-content:space-between;}
  23. .left{justify-content:flex-start;}
  24. .right{justify-content:flex-end;}
  25. .xcenter{justify-content:center;}
  26. .top{align-items:flex-start;}
  27. .ycenter{align-items:center;}
  28. .bottom{align-items:flex-end;}
  29. </style>