本文共 882 字，大约阅读时间需要 2 分钟。

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

页面显示效果：

转载地址：http://rcfoi.baihongyu.com/