wxss之flex布局笔记

一、wxss

1.尺寸单位

小程序规定了全新的尺寸单位“rpx”,其原理是无视设备原先的尺寸，统一规定屏幕宽度为750rpx。
换算：
设备 rpx换算px(屏幕宽度750）
iPhone5 1rpx=0.42px
iPhone6 1rpx=0.5px
iPhone6 Plus 1rpx=0.522px

2.常用属性

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

3.内联样式

（1）style

（2）class
如之前所使用

二、flex布局

（1）基本概念

1.容器和项目

对a,b而言：a容器 b项目
对b,c而言：b容器 c项目

2.坐标轴

（2）容器属性

1.flex-direction：

用于设置主轴方向，通过设置坐标轴可以规定项目的排列方向
语法格式

.container{
display:flex;
flex-direction: row(默认）|row-reverse|column|column-reverse;
}

row:默认值，主轴在水平方向上从左到右，项目按照主轴方向从左到右排列