微信小程序_(組件)flex佈局

 

 

　　小程序建議使用flex佈局進行排版

　　flex是一個盒裝彈性佈局

　　flex是一個容器，全部子元素都是他的成員

　　

　　定義佈局：display:flex

 

　　flex容器的屬性：

　　　　1、flex-direction：排列方向

　　　　2、flex-wrap：換行規則

　　　　3、justify-content：對齊方式

　　　　4、order：成員之間的顯示順序

　　　　5、flex：成員所佔屏幕的比例

 

1、flex-direction：排列方向

　　【默認】row：從左到右行排序

　　row-reverse：從右到左行排序

　　colomn：從上到下列排序

　　colomn-reverse：從下到上列排序

　　index.html中定義五個<view>分別加上a、b、c、d、e五個文本標籤，微信小程序中默認flex-direction:row

 

<!--index.wxml-->
Cynical丶Gary
<view class="container">
  
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>

</view>

index.html

 

.container{
  display: flex;
  /* 默認從左到右排序 */
  /* flex-direction: row; */
  /* 從右到左排序  */
  /* flex-direction: row-reverse; */
  /* 從上到下排序 */
  /* flex-direction: column; */
  /* 從下到上排序 */
  /* flex-direction: column-reverse; */

}

.size{
  width: 150rpx;
  height: 150rpx;
}

.a{
  background: red;
}

.b{
  background: yellow;
}

.c{
  background: blue;
}

.d{
  background: green;
}

.e{
  background: orange;
}

index.wxss

 

 

2、flex-wrap：換行規則

　　【默認】nowrap：不換行

　　wrap：換行

　　wrap-reverse：逆向換行

　　當五個元素size超出微信小程序橫向排版時（320），微信小程序默認使用flex-wrap: nowrap不換行

 

<!--index.wxml-->
Cynical丶Gary
<view class="container">
  
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>

</view>

index.wxml

 

.container{
  display: flex;
  /* 默認不換行 */
  /* flex-wrap: nowrap; */
  /* 換行 */
  /* flex-wrap: wrap; */
  /* 逆向換行 */
  /* flex-wrap: wrap-reverse; */

}

.size{
  width: 500rpx;
  height: 150rpx;
}

.a{
  background: red;
}

.b{
  background: yellow;
}

.c{
  background: blue;
}

.d{
  background: green;
}

.e{
  background: orange;
}

index.wxss

 

 

3、justify-content：對齊方式

　　【默認】flex-start：從左到右，向左對齊

　　flex-end：從右到左，向右對齊

　　center：居中對齊

　　space-between：塊級元素中間有空格

　　space-around：讓空格圍繞在成員周圍

　　當五個元素並列排序size未超出微信小程序橫向佈局

 

<!--index.wxml-->
Cynical丶Gary
<view class="container">
  
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>

</view>

index.wxml

 

.container{
  display: flex;
  /* flex-start:默認左對齊 */
  /* justify-content: flex-start; */
  /* flex-end:向右對齊 */
  /* justify-content: flex-end; */
  /* center:居中對齊 */
  /* justify-content: center; */
  /* space-between:塊級元素中間有空格 */
  /* justify-content: space-between; */
  /* space-around:讓空格圍繞在成員周圍 */
  /* justify-content:space-around;  */
}

.size{
  width: 100rpx;
  height: 150rpx;
}

.a{
  background: red;
}

.b{
  background: yellow;
}

.c{
  background: blue;
}

.d{
  background: green;
}

.e{
  background: orange;
}

index.wxss

 

 

4、order：成員之間的顯示順序

　　五個元素並列排序由order屬性決定，原本d和e中order屬性分別是4和5，現將order屬性改成5和4，可見d和e塊級元素位置進行了交換

 

<!--index.wxml-->
Cynical丶Gary
<view class="container">
  
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>

</view>

index.wxml

 

.container{
  display: flex;

}

.size{
  width: 100rpx;
  height: 150rpx;
}

.a{
  background: red;
  order:1;
}

.b{
  background: yellow;
  order:2;
}

.c{
  background: blue;
  order:3;
}

.d{
  background: green;
  order:4;
}

.e{
  background: orange;
  order:5;
}

index.wxss

 

 

5、flex：成員所佔屏幕的比例

　　當給五個塊級元素a、b、c、d、e設置order爲1時候，每一個元素所佔當行比例的1/5，當將a的order設置爲3時，a元素佔當行比例的3/(3+1+1+1+1)，依次類推

 

<!--index.wxml-->
Cynical丶Gary
<view class="container">
  
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>

</view>

index.wxml

 

.container{
  display: flex;

}

.size{
  width: 100rpx;
  height: 150rpx;
}

.a{
  background: red;
  order:1;
  flex:10;
}

.b{
  background: yellow;
  order:2;
  flex:2;
}

.c{
  background: blue;
  order:3;
  flex:1;
}

.d{
  background: green;
  order:4;
  flex:1;
}

.e{
  background: orange;
  order:5;
  flex:1;
}

index.wxss