个人总结，防遗忘
一维布局，按行或按列，解决元素对齐、分布和响应
横轴为主轴，竖轴为交叉轴
该演示需要使用的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布局区域的分配比例，第三部分的色块同理，
