前言
在css中其实也学过布局，利用display,float,position进行的布局，而最近微信小程序开发的学习是又学到了新的布局（涉及的比较晚，所以现在才知道而已，其实早都有了），因此来记录一下学习过程。
一、flex布局定义
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何的容器（盒子）中都可以用flex属性。
.box{
display:flex;
}
或者行内的flex属性设置。
.box{
display:inline-flex;
}
二、容器的属性
在进行了display的属性设置后，这是容器拥有了以下几个属性可以设置。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
以下对其中几个进行简要的说明，因为其中一些属性接触的次数也不多，所以没有太多可以讲的。
2.1 flex-direction
.box{
flex-direction: row | row-reverse | column | column-reverse
}
其中row为默认值，代表将元素以行排列（以左为起点）。row-reverse代表以右为起点进行行排列。column代表从页面上方进行列排列。column-reverse代表从页面下方进行列排列。效果图如下：
其实这个属性是用的最多的，因为在他很方便，而且目前阶段我对它的接触最多，因此运用的还算熟练。
2.2 flex-wrap
默认将项目排在一条线上，不换行。而 flex-wrap的属性则设定如何换行。
.box{
flex-wrap: nowarp | wrap | wrap-reverse;
}
nowrap（默认）为不换行，项目全部排列在一行。
wrap为换行，第一行在上面。
wrap-reverse为换行，但是第一行在下面。
2.3 flex-flow
该属性为flex-direction和flex-wrap的简写形式。
.box{
flex-direction: flex-direction || flex-wrap;
}
书写格式为先写flex-direction的值，再写flex-wrap的值。两个中间加空格。
