目录
一、尺寸单位 ：rxp
二、flex布局
1、display：flex；
2、flex-direction 属性
3、flex-wrap属性
4、justify-content 属性定义了项目再主轴上的对齐方式
5、align-items属性定义项目再交叉轴上如何对齐
6、flex-grow
三、背景图片
一、尺寸单位 ：rxp
计算公式：750 x 元素再设计稿中的宽度/设计稿基准宽度
例如：设计稿宽度为640px，元素A在设计稿上的宽度为100，那么元系A在宽度应该750×100，约为117rpx
二、flex布局
1、display：flex；
指定为 flex 布局
2、flex-direction 属性
①row（默认值）：主轴为水平方向。起点在左端
②row-reverse：主轴水平方向，起点在右端
③column：主轴为垂直方向，起点在上沿
④column-reverse：主轴为垂直方向，起点在下沿
3、flex-wrap属性
①nowrap（默认）：不换行
②wrap：换行，第一行在上方
③wrap-reverse：换行，第一行在下方
4、justify-content 属性定义了项目再主轴上的对齐方式
①flex-start（默认值）：左对齐
②flex-end：右对齐
③center：居中
④space-between：两端对齐，项目之间的间隔都相等
⑤space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
5、align-items属性定义项目再交叉轴上如何对齐
①flex-start：交叉轴的起点对齐
②flex-end：交叉轴的终点对齐
③center：交叉轴的中点对齐
④baseline：项目的第一行文字的基线对齐
⑤stretch（默认值）：如果项目未设置高度或设为 auto ，将占满整个容器的高度
6、flex-grow
①flex-grow 属性定义项目的放大比例，默认为0 ，即如果存在剩余空间，也不放大
②如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）
③如果一个项目的 flex-grow 属性为2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍
三、背景图片
1、不能大于 40kb，大于使用 base64 格式或使用网络地址
2、本地背景图片的引用路径推荐使用 ~@
3、微信小程序真机不支持相对路径
