flex布局（一）

首先，微信小程序的布局分为：flex布局、相对定位、绝对定位、浮动布局（由于flex布局可以基本实现浮动布局的功能，所以我们就略过）。

flex布局

flex的容器属性：
flex -direction 决定元素的排列方向
flex-wrap 决定元素如何换行
flex-flow 是flex-direction和flex-wrap的简写
justify-content 元素在主轴上的对齐方式
align-items元素在交叉轴上的对齐方式
flex的元素属性：
flex-grow 当有多余空间时，元素的放大比例
flex-basis当空间不足时，元素的缩小比例
flex是grow、shrink、basis的简写
order定义元素的排列顺序
align-self定义元素自身的对其方式

首先，我们先创建一个布局：

<view class="container">
<view class="item">A</view>
<view class="item">B</view>
<view class="item C">C</view>
<view class="item">D</view>
</view>

这样一来我们的基础布局就架好了：

现在我们就开始详细介绍上面的属性咯：
flex-direction: 用来控制容器内部元素的排列方向（也可以通过改变排列方向来改变主轴的方向），它默认是横向排放（主轴方向，与它成90度方向的叫做 交叉轴 ）的即flex-direction:row，如上图。。如果你想要它垂直摆放的话，只需要在class文件中加入flex-direction:column即可。

flex-wrap:为了看的更明了，在wxml文件中多加了几个view：

很明显的，子控件都被挤压的密密麻麻的了，这就是默认不换行即flex-wrap:nowrap。
flex-wrap:wrap在保证子空间的大小不被改变的同时，由上自下排列。

。flex-wrap:wrap-reverse与flex-wrap:wrap相同，唯一不同的是，它由下至上排序。
。好像有一点比较有趣，在布局中，只要加上了一个“-reverse”的属性都是与没加的排序方向相反。
flex-flow:其实，它就是是flex-direction与flex-wrap的结合体。使用情况就是flex-flow:raw wrap.感觉很是方便，如果同时要用的direction与wrap的话。
justify-content:这主要是设置元素在主轴上的对其方式。
center属性：想必大家都懂，居中对齐。
。
space-around属性：就是子控件在主轴方向上两边所占比例相同。

space-between属性：两两子控件在主轴方向上的间距比例相同。

flex-start属性：即是左对齐。同理：flex-end属性：右对齐。