微信小程序WXSS的学习（一）——Flex Box布局

个人总结，防遗忘

演示：

Flex Box布局

一维布局，按行或按列，解决元素对齐、分布和响应

横轴为主轴，竖轴为交叉轴

该演示需要使用的wxss语法：
display : flex;定义子元素默认按行排列
flex-grow用于按比例分配组件所占空间
flex-direction可以用于交换主轴与交叉轴，默认值为row，意思是以横轴为主轴，横向放置组件
例如：flex-direction : column;将竖轴变为主轴，横轴为交叉轴，意思是以竖轴为主轴，纵向放置组件
text-align设置文字居中
line-height设置行高

介绍完使用的代码，开始分布完成演示图片

wxml：

<view class="box1">
	<view class="box11">1</view>
	<view class="box12">2</view>
	<view class="box13">3</view>
</view>

wxss：

.box1{
  display: flex;
}
.box11{
  flex-grow: 1;
}
.box12{
  flex-grow: 1;
}
.box13{
  flex-grow: 1;
}

效果：
在box1的属性里添加宽度以及文字对齐方式，并在每个box1的子元素（box11，box12，box13）的属性内设定背景颜色：

.box1{
  display: flex;
  text-align: center; 
  line-height: 80rpx; 
}
.box11{
  background-color: red;
  flex-grow: 1;
}
.box12{
  background-color: green;
  flex-grow: 1;
}
.box13{
  background-color: blue;
  flex-grow: 1;
}

效果：

第二部分和第三部分的色块是通过view的类之间的包含关系改变色卡分布区域，以下是完整的代码
wxml：

<view class="box">
	<view class="title">布局 </view>
	<view class="box1">
		<view class="box11">1</view>
		<view class="box12">2</view>
		<view class="box13">3</view>
	</view>
  -------------------------------------------------
	<view class="box2">
		<view class="box21">1</view>
		<view class="box222">
			<view class="box22">2</view>
			<view class="box23">3</view>
		</view>
	</view>
---------------------------------------------------
	<view class="box3">
	<view class="box31">1</view>
		<view class="box333">
			<view class="box32">2</view>
			<view class="box33">3</view>
	</view>
</view>
</view>

wxss：

.box1{
  display: flex;
  text-align: center; 
  line-height: 80rpx; 
}
.box11{
  background-color: red;
  flex-grow: 1;
}
.box12{
  background-color: green;
  flex-grow: 1;
}
.box13{
  background-color: blue;
  flex-grow: 1;
}

.box2{
  display: flex;
  height: 300rpx;
  text-align: center;
}
.box21{
  background-color: red;
  width: 250rpx;
  line-height: 150rpx;
  
}
.box222{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  line-height: 150rpx;
}
.box22{
  background-color: green;
  flex-grow: 1;
}
.box23{
  background-color: blue;
  flex-grow: 1;
}

.box3{
  display: flex;
  flex-direction: column;
  line-height: 300rpx;
  text-align: center;
}
.box31{
  background-color: red;
  height: 100rpx;
  line-height: 100rpx;

}
.box333{
  display: flex;
  flex-direction: row; 
}
.box32{
  background-color: green;
  flex-grow: 1;
}
.box33{
  background-color: blue;
  flex-grow: 1;
}

实现效果：

flex默认从上到下，从左到右放置组件，这里对组件class的命名是由大到小，先分成三块区域，整体设置为box1，box2，box3。再将同一类型的组件放在一起，可以看出第二部分和第三部分的2和3色块都是只有颜色不同，所以这里将2和3色块与1色块分别命名分为box21和box222（第三部分的命名：box31和box333），同时2和3颜色不同，所以在box222的子类中定义了box22，box23，用于设置背景颜色以及剩余Flex布局区域的分配比例，第三部分的色块同理，