之前已經(jīng)把小程序的框架說完了，接下來說說小程序的組件，在說組件之前，先說說布局吧。源碼：https://github.com/limingios/wxProgram.git 中的No.9

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了永善免費(fèi)建站歡迎大家使用！

小程序的flex布局

• 小程序建議使用flex布局進(jìn)行排版
  >其實div+css的方式也可以，只是官方建議使用flex布局的方式

• flex 就是一個盒裝彈性布局

• flex是一個容器，所有的子元素都是它的成員。

整個是一個大盒子，大盒子里面有很多的小塊a，b，c，d，e，f都是他的成員，針對其中的成員可以增加對應(yīng)的樣式，可以看出來a，b，d是比較大的，c是最小的，我們可以通過樣式控制它們的大小，我們也可以通過order的方式控制他們的位置順序，一般正常的咱們的頁面都有順序的，可以通過布局的order屬性，把順序給展示出來。

• 定義布局display:flex

• flex 容器的屬性
  flex-direction：排列方向
  flex-wrap：換行規(guī)則
  justify-content：對齊方式

flex-direction

容器內(nèi)的方向，方向可以從上到下，從左到右。

• row[flex-direction 默認(rèn)布局方式]

  從左到右

• row-reverse

  從右到左

• column

  從上到下

• column-reverse

  從下到上

• 演示
  flex-direction.wxml

??a
??b
??c
??d
??e






??a
??b
??c
??d
??e






??a
??b
??c
??d
??e







??a
??b
??c
??d
??e

flex-direction.wxss

.container-row{
??display:?flex;
??flex-direction:?row;
}

.container-row-reverse{
??display:?flex;
??flex-direction:?row-reverse;
}

.container-column{
??display:?flex;
??flex-direction:?column;
}

.container-column-reverse{
??display:?flex;
??flex-direction:?column-reverse;
}

.size{
??width:?200rpx;
??height:?150rpx;
}
.a?{
??background:?red;
}
.b?{
??background:?yellow;
}

.c?{
??background:?blue;
}

.d?{
??background:?green;
}

.e?{
??background:?gold;
}

flex-wrap

容器換行的屬性，分別是不換行，換行，逆向換行

• nowrap[flex-nowwrap 默認(rèn)不換行]

  不換行

• wrap

  換行

• wrap-reverse

  逆向換行

• 演示
  container-wrap.wxml

??a
??b
??c
??d
??e



歡迎訪問我的個人網(wǎng)站：idig8.com
公眾號：編程坑太多



??a
??b
??c
??d
??e



歡迎訪問我的個人網(wǎng)站：idig8.com
公眾號：編程坑太多



??a
??b
??c
??d
??e

flex-wrap.wxss

.container-nowrap{
??display:?flex;
??flex-wrap:?nowrap;
}
.container-wrap{
????display:?flex;
??flex-wrap:?wrap;
}

.container-wrap-reverse{
????display:?flex;
??flex-wrap:?wrap-reverse;
}


.size{
??width:?200rpx;
??height:?150rpx;
}
.a?{
??background:?red;
}
.b?{
??background:?yellow;
}

.c?{
??background:?blue;
}

.d?{
??background:?green;
}

.e?{
??background:?gold;
}

flex-wrap

靠那個方向?qū)R的一個屬性

• flex-start[flex-start 默認(rèn)左對齊]

  左對齊

• flex-end

  向右對齊

• center【使用最多的方式】

  居中對齊

• space-around

  在成員元素周圍包裹空格

• space-between

  在成員元素之前留空白

• 演示
  justify-content.wxml

??a
??b
??c
??d
??e



歡迎訪問我的個人網(wǎng)站：idig8.com
公眾號：編程坑太多



??a
??b
??c
??d
??e



歡迎訪問我的個人網(wǎng)站：idig8.com
公眾號：編程坑太多



??a
??b
??c
??d
??e



歡迎訪問我的個人網(wǎng)站：idig8.com
公眾號：編程坑太多



??a
??b
??c
??d
??e



歡迎訪問我的個人網(wǎng)站：idig8.com
公眾號：編程坑太多



??a
??b
??c
??d
??e

justify-content.wxss

.container-flex-start{
??display:?flex;
??justify-content:?flex-start;
}
.container-flex-end{
??display:?flex;
??justify-content:?flex-end;
}

.container-center{
??display:?flex;
??justify-content:?flex-center;
}

.container-space-around{
??display:?flex;
??justify-content:?space-around;
}


.container-space-between{
??display:?flex;
??justify-content:?space-between;
}

.size{
??width:?50rpx;
??height:?150rpx;
}
.a?{
??background:?red;
}
.b?{
??background:?yellow;
}

.c?{
??background:?blue;
}

.d?{
??background:?green;
}

.e?{
??background:?gold;
}

flex成員元素的樣式設(shè)置

順序和比例分配

• order

  通過數(shù)字對flex容器內(nèi)部的成員設(shè)置顯示的順序

• flex

  設(shè)置每個成員所占行級的顯示比例

• 演示
  order-flex.wxml

??a
??b
??c
??d
??e



歡迎訪問我的個人網(wǎng)站：idig8.com
公眾號：編程坑太多

order-flex.wxss

.container{
??display:?flex;
??justify-content:?flex-start;
}

.size{
??height:?150rpx;
}
.a?{
??background:?red;
??order:5;
??flex:4;
}
.b?{
??background:?yellow;
??order:1;
??flex:1;
}

.c?{
??background:?blue;
??order:3;
??flex:2;
}

.d?{
??background:?green;
??order:32;
??flex:3;
}

.e?{
??background:?gold;
??order:4;
??flex:2;
}

PS：flex布局基本說完了，基本也給各種場景下的屬性含義直觀的方式進(jìn)行了演示，但是老鐵雖然我搞完了，但是你們?nèi)绻雽W(xué)小程序還是勤加練習(xí)的，好腦子不如爛筆頭對吧！

>>原創(chuàng)文章，歡迎轉(zhuǎn)載。轉(zhuǎn)載請注明：轉(zhuǎn)載自IT人故事會，謝謝！
>>原文鏈接地址：「小程序JAVA實戰(zhàn)」小程序的flex布局（22）

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。