這篇文章將為大家詳細(xì)講解有關(guān)微信小程序之容器組件view實(shí)現(xiàn)水平縱向布局的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)綏化免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

項(xiàng)目中最常用的兩種布局方式，水平布局和垂直布局，在微信小程序中實(shí)現(xiàn)起來也比較簡(jiǎn)單。
1.橫向水平布局：

實(shí)現(xiàn)水平布局，需要四個(gè)view容器組件，其中一個(gè)是父容器。如下：

  
  
  box1  
  box2  
  box3  

給父容器以下樣式：

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

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

  
  box1  
  box2  
  box3  

效果就是每個(gè)寬度占50px,同樣實(shí)現(xiàn)橫向水平布局。效果如下：

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

  
  
  box1  
  box2  
  box3  

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

2.縱向垂直布局：

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

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

  
  
  box1  
  box2  
  box3  

效果如下：

關(guān)于“微信小程序之容器組件view實(shí)現(xiàn)水平縱向布局的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。