wxss之flex布局

一、wxss

尺寸单位

小程序规定了全新的尺寸单位"rpx"，其原理是忽视设备原有尺寸，统一规定屏幕宽度为750rpx（举例），就是将屏幕尺寸划分为750份，1份为1rpx。
换算：

设备	rpx换算px（以750rpx为例）
iPhone5（320*568px）	1rpx=0.42px
iPhone6（375*667px）	1rpx=0.5px
iPhone6 Plus（414*736px）	1rpx=0.522px

常用属性

样式名	样式意义
background-color	背景色
color	前景色
font-size	字体大小
border	边框
height	高度
width	宽度

内联样式

style

<view style="color:red;">测试</view>

class

//css类选择器用法

二、flex布局

基本概念

1. 容器和项目

<view class="a">
	<view class="b">
		<view class="c"></view>
	</view>
</view>
//对于a和b而言：a是容器，b是项目
//对于b和c而言：b是容器，c是项目

2. 坐标轴
   
   
3. 容器属性

flex-direction

/*用于设置主轴方向，通过设置坐标轴可以规定项目的排列方向*/
.container{
	display: flex;/*设置flex布局*/
	flex-direction: column;/*设置布局主轴方向*/
}
/*布局方向可选值：*/
/*row：默认值，主轴在水平方向上从左到右，项目按照主轴方向从左到右排列*/
/*row-reverse：主轴是row的反方向，项目按照主轴方向从右到左排列*/
/*column：主轴在垂直方向上从上而下，项目按照主轴方向从上往下排列*/
/*column-reverse：主轴是column的反方向，项目按照主轴方向从上往下排列*/

justify-content

/*用于设置项目在主轴方向上的对齐方式，以及分配项目之间及
周围多余的空间*/
.container{
  display: flex;
  justify-content: center;
}
/*对齐方式可选值：*/
/*flex-start：默认值，表示羡慕对齐主轴起点，项目间不留空隙*/
/*center：项目在主轴上居中排列，项目间不留空隙*/
/*flex-end：项目对齐主轴终点，项目间不留空隙*/
/*space-between：项目间距相等，第一个和最后一个项目分别离起点/终点的距离为0*/
/*space-around：与space-between相似，不同之处为第一个项目离主轴起点和最后一个项目离主轴终点的距离为中间项目间距的一半*/

align-items

/*用于设置项目在交叉轴方向上的对齐方式*/
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*对齐方式可选值：*/
/*stretch：默认值，未设置项目尺寸时将项目设置为填满交叉轴*/
/*flex-start：项目顶部与交叉轴起点对齐*/
/*center：项目在交叉轴居中对齐*/
/*flex-end：项目底部与交叉轴终点对齐*/

align-content

/*用于多行排列时设置项目在交叉轴方向上的对齐方式，以及分配项目之间及其周围多余的空间*/
.container{
  height: 750rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;/*放不下自动换行*/
  align-content: center;
}
/*对齐方式可选值：*/
/*stretch：默认值，未设置项目尺寸时，将各行中的项目拉伸至满交叉轴；当设置了项目尺寸时，项目尺寸不变，项目行拉伸至填满交叉轴*/
/*flex-start：首行在交叉轴起点开始排列，行间不留间距*/
/*center：行在交叉轴居中对齐*/
/*flex-end：尾行在交叉轴终点开始排列，行间不留间距*/
/*space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点的距离相等*/
/*space-between：行间间距、首行离交叉轴起点和尾行离交叉轴终点的距离相等*/

flex-wrap

/*用于规定是否允许项目换行，以及多行排列时换行的方向*/
.container{
  display: flex;
  flex-wrap: nowrap;
}
/*可选值：*/
/*nowrap：默认值，表示不换行，如果单行内容过多，项目宽度可能被压缩*/
/*wrap：当容器单行容不下所有项目时允许换行排列*/
/*wrap-reverse：当容器单行容不下所有项目时允许换行排列，换行方向为wrap的反方向*/