flex布局

一、基础知识

1、主轴与交叉轴

2、flex容器属性

属性	取值	含义
flex-direction	row、column	row(默认) ：横着排列 column 表示竖着排列
flex-wrap	nowrap、wrap、wrap-reverse	nowrap(默认) ：不换行 wrap ：元素排列的时候可以换行显示 wrap-reverse ：倒序排列
justify-content	flex-start,center,flex-end	元素在主轴上的位置
align-items	flex-start,center,flex-end	元素在交叉轴上的位置（设置高度后使用）

3、flex元素属性

属性	取值	含义
flex-basis	比如：100px	元素在主轴上占据的空间
order	比如：1	定义元素的排列顺序
align-self	比如：100px	元素自身的对齐方式
flex-grow	比如：1（默认为0）	当有多余空间时，元素的放大比例
flex-shrink	比如：1（默认为0）	当空间不足时，元素的缩小比例

二、实战

代码

<view class="flex-row">
  <view class="flex-column1"><view>123</view></view>
  <view class="flex-column2">456</view>
  <view class="flex-column3">789</view>
</view>

.flex-row{
  display: flex;
  background-color: #9D9D9D;
  height: 200rpx;
  justify-content: center;
  align-items: center;
}
.flex-column1{
  background-color: blue;
  display: flex;
  align-self: flex-start;
}
.flex-column2{
  background-color: rgb(69, 137, 182);
  display: flex;
  align-self: center;
}
.flex-column3{
  background-color: rgb(236, 106, 46);
  display: flex;
  align-self: flex-end;
}

效果图

三、备注

主轴方向上元素对齐方式有个问题，而且还是个大坑
主轴方向有三个属性，分别是justify-content、justify-items与justify-self，我主要用justify-content，置于其他两个,令人很困惑，我没搞懂啥意思，也测试了一下，搞了大半天，结果还是没什么反应，应该是没搞懂其原理。StackOverflow也提出了相关问题，大家可以看看。

交叉轴
交叉轴方向也有三个属性，分别是align-items、align-self和align-content（必须开启换行才能有效果，即flex-wrap:wrap），我主要用前面两个，使用align-items来统一设置flex容器里面的元素在交叉轴上的对齐方式，然后通过align-self来根据需要修改相关元素的对齐方式。
总之呢，个人而言，会使用justify-content跟align-items应该就可以了！