【微信小程序】组件之页面布局

小程序的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;
}

页面显示效果：