一、wxss

1.尺寸单位

小程序中规定全新尺寸单位rpx，其原理是无视设备原先的尺寸，统一规定屏幕宽度为750rpx。

换算

设备	rpx换算px
iPhone5	1rpx = 0.42px
iPhone6	1rpx = 0.5px
iPhone6Plus	1rpx = 0.522px

2.常用属性

key	含义
background-color	背景色
color	前景色
font-size	字体大小
border	边框
width	宽度
height	高度

二、Flex布局

1.基本概念

1.1 容器和项目

 <view calss="a">
     <view calss="b">
         <view calss="c"></view>
     </view>
 </view>

• 对于a、b而言：a是容器，b是项目
• 对于b、c而言：b是容器，c是项目

1.2 容器属性

（1）flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

 .box {
   flex-direction: row | row-reverse | column | column-reverse;
 }

（2）flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

 .box{
   flex-wrap: nowrap | wrap | wrap-reverse;
 }

• nowrap

• wrap

• wrap-reverse

（3）flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

 .box {
   flex-flow: <flex-direction> <flex-wrap>;
 }

（4）justify-content

justify-content属性定义了项目在主轴上的对齐方式

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

（5）align-items

align-items属性定义项目在行中的对齐方式

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

（6）align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。