Flex

flex 布局

WeUI提供了快速的 flex 布局

示例代码

  1. <template>
  2. <divclass="page">
  3. <divclass="page__bd page__bd_spacing">
  4. <divclass="weui-flex">
  5. <divclass="weui-flex__item">
  6. <divclass="placeholder">weui</div>
  7. </div>
  8. </div>
  9. <divclass="weui-flex">
  10. <divclass="weui-flex__item">
  11. <divclass="placeholder">weui</div>
  12. </div>
  13. <divclass="weui-flex__item">
  14. <divclass="placeholder">weui</div>
  15. </div>
  16. </div>
  17. <divclass="weui-flex">
  18. <divclass="weui-flex__item">
  19. <divclass="placeholder">weui</div>
  20. </div>
  21. <divclass="weui-flex__item">
  22. <divclass="placeholder">weui</div>
  23. </div>
  24. <divclass="weui-flex__item">
  25. <divclass="placeholder">weui</div>
  26. </div>
  27. </div>
  28. <divclass="weui-flex">
  29. <divclass="weui-flex__item">
  30. <divclass="placeholder">weui</div>
  31. </div>
  32. <divclass="weui-flex__item">
  33. <divclass="placeholder">weui</div>
  34. </div>
  35. <divclass="weui-flex__item">
  36. <divclass="placeholder">weui</div>
  37. </div>
  38. <divclass="weui-flex__item">
  39. <divclass="placeholder">weui</div>
  40. </div>
  41. </div>
  42. <divclass="weui-flex">
  43. <div>
  44. <divclass="placeholder">weui</div>
  45. </div>
  46. <divclass="weui-flex__item">
  47. <divclass="placeholder">weui</div>
  48. </div>
  49. <div>
  50. <divclass="placeholder">weui</div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </template>
  57. <script>
  58. exportdefault{
  59. data(){
  60. return{
  61. }
  62. },
  63. methods:{
  64. }
  65. }
  66. </script>
  67. <style>
  68. .placeholder {
  69. margin:5px;
  70. padding:010px;
  71. text-align: center;
  72. background-color:#ebebeb;
  73. height:2.3em;
  74. line-height:2.3em;
  75. color:#cfcfcf;
  76. }
  77. </style>

从示例代码可以看出,首先需要在要进行flex布局的父元素上加上类 weui-flex ,然后将每个 flex 元素加上类 weui-flex__item即可。

效果

flex01