實現水平布局，需要四個view容器組件，其中一個是父容器。如下：

<!--index.wxml-->  
<view class="content">  
  <view  style="flex:1;height:100px;background-color:green">box1</view>  
  <view style="flex:1;height:100px;background-color:blue">box2</view>  
  <view style="flex:1;height:100px;background-color:yellow">box3</view>  
</view>

給父容器以下樣式：

/**index.wxss**/  
.content{  
  display: flex;  
  flex-direction: row;  
}

其中display:flex將view設置為彈性布局，flex-direction: row;設置布局的方向是橫向水平布局。
在三個自容器view中，設置一個高度，不設置寬度，將flex設置為1，意思是評分屏幕寬度，以便得到三個同等寬度。當然您也可以設置他的寬度，比如我設置如下：

<view class="content">  
  <view  style="width:50px;height:100px;background-color:green">box1</view>  
  <view style="width:50px;;height:100px;background-color:blue">box2</view>  
  <view style="width:50px;;height:100px;background-color:yellow">box3</view>  
</view>

效果就是每個寬度占50px,同樣實現橫向水平布局。效果如下：

而當我將box1設置為固定寬度50px，而box2,box3不設置寬
度而直接設置flex:1，代碼如下：

<!--index.wxml-->  
<view class="content">  
  <view  style="width:50px;height:100px;background-color:green">box1</view>  
  <view style="flex:1;height:100px;background-color:blue">box2</view>  
  <view style="flex:1;height:100px;background-color:yellow">box3</view>  
</view>

效果將會是box1占了他該有的50px的寬度之后，剩下的整個屏幕的寬度由box2和box3平分。效果如下：

2.縱向垂直布局：

縱向布局實現跟橫向布局相似，但是需要把布局方式改為縱向列式的，假如需要將每個box的寬度設置為flex:1等自適應布局的話，需要給父容器一個高度，否則子容器的高度只會顯示為剛好能包裹文字的告訴。當然您也可以設置每個box的高度。這里我選擇自適應，所以給父容器一個600px的高度，讓里面的三個box平分他的高度。代碼
如下：

/**index.wxss**/  
.content{  
  height: 600px;  
  display: flex;  
  flex-direction: column;  
}

<!--index.wxml-->  
<view class="content">  
  <view style="flex:1;width:100%;background-color:green">box1</view>  
  <view style="flex:1;width:100%;background-color:blue">box2</view>  
  <view style="flex:1;width:100%;background-color:yellow">box3</view>  
</view>

效果如下：

我們可以使用以上所述的方式實現更多靈活的布局。

更多微信小程序之容器組件view實現水平縱向布局相關文章請關注PHP中文網！