微信小程序 flex布局属性总结

<!--pages/flex/flex.wxml-->
<view class="contant" style="height:{{height}}px">
   <view class="basicview1"></view>
   <view class="basicview2"></view>
   <text class="basicview">1</text>
   <text class="basicview">2</text>
   <text class="basicview basicview3">3</text>
   <text class="basicview">4</text>
   <text class="basicview">5</text>
   <text class="basicview">6</text>
   <!--<text class="basicview basicview7">7</text>
   <text class="basicview">8</text>-->
</view>

微信小程序 ---- flex布局篇

              flex-shrink : 0 ; 1 ----自动缩放    

              flex-grow :0 ; 1 ----  针对设备item放大     

              上面两个其实是相反的

              以上两者可简写 flex : 0 0 50%;  或者  flex : 1 1 auto;    (flex-shrink : 1 ; flex-grow : 1)

 

              flex-direction : row(行)  column(列)    

              flex-wrap :wrap  (自动换行)        

             以上两者可简写    flex-flow : row  wrap;     (针对容器)          

           

            flex-basis : 50%    相对于设备宽度比例的放大或缩小  

            justify-content :  center    (主轴)  

           align-items : (竖轴)  ----影响用于一行排列

           align-content  (间距)  --- 影响用于多行排列 

           align-self : flex-end   (脱流)