微信小程序：Flex佈局VS普通佈局

普通佈局思維：

CSS：

　　.cases-left,.cases-right{width:47%;float:left;margin-left:2%;}

 

Flex思維：

CSS：

　　.cases{display:flex;flex-flow:row wrap;justify-content:space-around;}
　　.cases>view{width:47%;}　　　　//固定寬度的目的是為了讓其向下擴展

 

普通動態寬度：

Html：

　　<view style="width:{{vW}}" wx:for="{{view}}">{{item}}</view>

Js：

　　vW = 1 / (view.length) * 100 + "%";
　　this.setData({vW})

Flex動態寬度：

CSS：

　　.vW{display:flex;flex-flow:row nowrap;justify-content:space-around;}
　　.vW>view{width:100%;}　　　　//固定寬度的目的是為了讓其可以均勻排滿