graceFlex.vue 747 B

123456789101112131415161718192021222324252627282930
  1. <template>
  2. <view class="gui-flex" :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. .gui-flex{display:flex;}
  18. .row{flex-direction:row;}
  19. .column{flex-direction:column;}
  20. .wrap{flex-direction:row; flex-wrap:wrap;}
  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. .xreverse{flex-direction:row-reverse;}
  27. .top{align-items:flex-start;}
  28. .ycenter{align-items:center;}
  29. .bottom{align-items:flex-end;}
  30. </style>