前言
最近小程序的势头渐渐变猛，一方面有微信逐渐完善的生态社区，另一方面又有百度、阿里甚至头条都开始构建自己的小程序生态。在移动端的兼容需求越来越多，那么提高开发效率自然也就成了前端的需求，Flex布局是个好东西。
一、Flex与传统盒子的对比
传统布局的核心是盒子模型，依赖 display 属性 + position 属性 + float 属性。可以看出来传统布局非常容易实现像 word 左对齐，右对齐这样的功能，可以说，传统布局更适合于文字排版。
但是，对于垂直居中这样一些布局，以及响应式开发，虽说可以实现，但是却不够效率。使用Flex布局则有这些优势：
- 免去了很多计算。在布局中Flex大量运用了比例的关系去映射元素的位置；
- flex 对响应式布局的支持更好，很多时候屏幕尺寸的改变幅度大，用传统布局去更改需要计算大量坐标像素；
- flex 支持行内元素。
二、Flex概念介绍
1、弹性盒子模型：
要灵活运用flex提供的便利，首先需要了解的是它盒子中贯彻的概念：
- 主轴（main axis）
- 交叉轴（cross axis）
如图：
Flex中的所有属性都基于这两条轴产生作用。
三、Flex的使用
使用Flex弹性盒子的方法很简单，就是在元素的样式中加入display:flex，那么该元素包含的子元素都将对Flex的容器属性产生作用。
这里又需要区分一个概念，Flex是有容器属性和子元素属性的，所谓容器属性，就是只能在父容器（父元素）中设置样式，对所有子元素产生效果的属性，而子元素属性，则是在已经设置了display:flex的父元素下的子元素，自身可以设置的属性。
（一）容器属性
1、flex-direction
定义子元素在主轴（mian axis）的排列方向
div{
display:flex;
/*共有四个参数*/
flex-direction:row;（横向排列，从左到右按顺序）
flex-direction:row-reverse;(横向排列，从右到左)
flex-direction:column;（纵向排列，从上到下）
flex-direction:column-reverse;(纵向排列，从下到上)
}
2、flex-wrap
定义元素是否换行
div{
display:flex;
/*共有四个参数*/
flex-wrap:nowrap;（默认值,不换行，且元素的宽度设置无效)
flex-wrap:wrap;(宽度不够自动换行，且是正序)
flex-wrap:wrap-reverse;(宽度不够自动换行，倒序)
}
3、justify-content
子元素在主轴（main axis）上的对齐方式
div{
display:flex;
/*共有五个参数 */
justify-content:flex-start;(默认值，从主轴的开始位置开始排列)
justify-content:flex-end;（从主轴的结束位置开始排列）
justify-content:center;（居中）
justify-content:space-around;（两端对齐，子元素之间的间隔都相等）
justify-content:space-between;（两端贴紧边界，子元素之间的间隔都相等）
}
4、align-content
定义了多根主轴线内元素在交叉轴（cross axis）上的对齐方式。如果整个父容器内只有一行子元素，则该属性无效
div{
display:flex;
/*共有五个参数 */
align-content:flex-start;(默认值，从交叉轴的开始位置开始排列)
align-content:flex-end;（从交叉轴的结束位置开始排列）
align-content:center;（与交叉轴的中点对齐）
align-content:stretch;（拉伸铺满）
align-content:space-around;（上下两端对齐，子元素之间的间隔都相等）
align-content:space-between;（上下端贴紧边界，子元素之间的间隔都相等）
}
5、align-items
子元素在交叉轴（cross axis）上的对齐方式
div{
display:flex;
/*共有五个参数 */
align-items:flex-start;(默认值，从交叉轴的开始位置开始排列)
align-items:flex-end;（从交叉轴的结束位置开始排列）
align-items:center;（与交叉轴的中点对齐）
align-items:stretch;（拉伸铺满）
align-items:baseline;（根据子元素的第一行文字基线对齐）
}
以上就是所有需要写在父容器上的Flex属性了，还有需要设置在子元素的属性估计会在下一篇总结继续补充。