微信小程序 view样式

参考链接：
（1）微信小程序View的布局
https://www.jianshu.com/p/862dfa698523

微信小程序样式众多，这里介绍最为常用的view

小程序 View 支持两种布局方式：block 和 flex
所有 View 默认都是 block
要使用 flex 布局的话需要显式的声明：display:flex;

接下来便可以：

（1）在view 的wxss里尝试如下属性：

例如：
//使用 flex 布局
display: flex;

.hengxiangClass {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.shuxiangClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

（2）横向布局or竖向布局=>设置属性 flex-direction

flex-direction: row;
{
	row：从左到右的水平方向为主轴
	row-reverse：从右到左的水平方向为主轴
	column：从上到下的垂直方向为主轴
	column-reverse：从下到上的垂直方向为主轴
}

（3）设置元素在横向上的布局方向，需要设置 justify-content 属性

justify-content: space-around;
{
	flex-start：主轴起点对齐(默认值)  
	flex-end：主轴结束点对齐  
	center：在主轴中居中对齐  
	space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等  
	space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同  
}

（4）设置元素在纵向上的布局方向，需要设置 align-items 属性

align-items: center;
{
	stretch 填充整个容器(默认值)
	flex-start 侧轴的起点对齐
	flex-end 侧轴的终点对齐
	center 在侧轴中居中对齐
	baseline 以子元素的第一行文字对齐
}

（5）用于控制子 View 是否换行=>设置flex-wrap 属性

flex-wrap: wrap;
{
	nowrap：不换行（默认）
	wrap：换行
	wrap-reverse：换行，第一行在最下面
}