<!--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 (脱流)