Flex

flex 布局

WeUI提供了快速的 flex 布局

示例代码

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

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

效果

flex01