小程式的flex佈局

1. 小程式建議使用flex佈局進行排版
2. flex就是一個盒裝彈性佈局
3. flex是一個容器，所有子元素都是它的成員。

定義佈局：display：flex

flex 容器的屬性：

1、屬性flex-direction: 排列方向。有下面四個值：

• row 行，從左到右
• row-reverse，從右到左。
• column ：列，從上到下。
• column-reverse:從下到上。

2、屬性 flex-wrap：換行規則。有三個值：

• nowrap ：不換行
• wrap: 順序換行
• wrap-reverse：逆向換行

3、justify-content:對齊方式，有五個值：

• flex-start: 向左看齊
• flex-end：向右對齊
• center：居中對齊
• space-between： 在成員元素之間留空白
• apace-around：在成員元素周圍包裹空白

flex容器成員的屬性

1. order：成員之間的顯示順序。通過 數字對flex容器內部的成員設定顯示順序。
2. flex：成員所佔螢幕比例。配置每個成員元素所佔行級的顯示比例。

練習wxss設定如下：

/**index.wxss**/
.container{
  display: flex;
  
  /* flex-direction: row;  */
  /* flex-wrap: wrap; */
  
  justify-content: space-between;
}
.size{
   width: 100rpx;
   height: 150rpx;
}
.a{
  background: red;
  order:1;
  flex:1;
}
.b{
  background: yellow;
  order:5;
  flex:3;
}
.c{
  background: blue;
  order:3;
  flex:2;
}
.d{
  background: green;
  order:2;
  flex:1;
}
.e{
  background: orange;
  order:4;
  flex:1;
}
 

頁面顯示效果：