小程序的flex布局
- 小程序建议使用flex布局进行排版
- flex就是一个盒装弹性布局
- 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容器成员的属性
- order:成员之间的显示顺序。通过 数字对flex容器内部的成员设置显示顺序。
- 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;
}
页面显示效果: