上篇文章谈了谈移动端布局，反响不错，这次来总结一下我在移动端常用的布局方法——Flexbox基础语法，这篇文章可以保存下来，当作文档使用，如需word版，可以留言。
网页布局是css的重点应用之一，而在移动互联网肆虐横行的时代，移动端网页布局才是咱前端的主战区，传统的pc端布局方案比较依赖display、position、float、margin、padding等属性，而这些布局属性已经不能满足咱们移动端开发了，比如垂直居中就是让前端非常蛋疼的问题，有时还会傻傻的去做精确计算，太没效率了。为了解决这一痛点，W3C在2009年提出了一种全新的CSS布局方式——弹性布局方式，依赖flexbox，从此，我们可以更简单，高效的完成可伸缩式页面的布局。本文就针对flex的基础语法和应用场景做一些简要的概述，文采有限，非喜勿喷。
我记得第一次接触移动端开发时，就挣扎在微信端整整一个月，，难度可想而知，不过在度娘的帮助下，坑一个个的被填上，其中用起来最爽的要数flexbox，真是移动端布局神器。
一、兼容问题
前端同学对Flexbox布局方式是想用而不敢用，总是担心兼容性会出问题，现在我可以很负责任的告诉你，请你放心大胆的用，同事android 4.0亲测，是没问题的，不过请使用下面这种兼容写法：
Html：
Css：
二、基本语法
说之前先看张图
(1)父元素
如图所示在felxbox布局中，父元素.fatcher可以设置六个属性，分别是
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1、flex-direction
在felxbox布局中，默认有两颗轴，水平轴和垂直轴
此属性决定主轴的方向（即子元素.son的排列方向，默认是水平方向），有四个值可取，分别为，flex-direction: row row-reverse column column-reverse，接下来用一张图来看看这几个值的含义、写法和效果。
2、flex-wrap
此属性表示当子元素.son太多时，需不需要换行（默认是不换行），有三个值取，flex-wrap: nowrap wrap wrap-reverse，接下来用一张图来看看这几个值的含义、写法和效果。
3、flex-flow
这个属性是上面两个的简写形式，默认是水平方向，不换行，自行进行组合即可，在这就不再赘述。
4、justify-content
定义了子元素.son元素的对齐方式，默认是左对齐。五个值可选
.fatcher{
justify-content: flex-start flex-end center space-between space-around;
}
值的含义分别为：左对齐(默认)，右对齐，居中对齐，两端对齐，每个子元素.son两侧的间隔相等；
效果分别为：
5、align-items
定义子元素.son在轴上怎么对齐，默认是沾满整个容器。五个值可选
.fatcher{
align-items: flex-start flex-end center baseline stretch;
}
值的含义分别为：轴的起点对齐、轴的终点对齐、轴的中心点对齐、子元素.son元素的第一行文字的基线对齐、默认值，如果子元素.son未设置高度或设为auto，将占满整个容器的高度。
效果如图所示：
6、align-content
定义了多根轴线的对齐方式。如果子元素.son只有一根轴线，该属性不起作用。
.fatcher{
align-content: flex-start flex-end center space-between space-around stretch;
}
含义分别为：轴的起点对齐、轴的终点对齐、轴的中心点对齐、与轴两端对齐，轴线之间的间隔平均分布、轴线占满整个交叉轴。效果与align-items类似，在这就不显示了。
(2)子元素
说完父元素的属性，再来说说子元素.son的属性值有哪些，同样六个：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1、order
定义子元素.son的排列顺序。数值越小，排列越靠前，默认为0。
写法
.son{
order:1/2/3/-1;
}
效果如图：
2、flex-grow
定义子元素.son的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有子元素.son的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素.son的flex-grow属性为2，其他子元素.son都为1，则前者占据的剩余空间将比其他子元素.son多一倍。
效果如下：
3、flex-shrinK
定义了子元素.son的缩小比例，默认为1，即如果空间不足，该元素将缩小。
如果所有子元素.son的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个子元素.son的flex-shrink属性为0，其他子元素.son都为1，则空间不足时，前者不缩小。
.son{
flex-grow: <number>; / default 0 /
}
4、flex-basis
属性定义了在分配多余空间之前，子元素.son占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素.son的本来大小。它可以设为跟width或height属性一样的值（比如350px），则子元素.son将占据固定空间。
5、Flex
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
6、align-self
属性允许单个子元素.son有与其他子元素.son不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto flex-start flex-end center baseline stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
三、总结：
flex 12个属性中，我在移动端开发常用的属性有：flex-direction 、justify-content 、flex-flow 、align-items (解决垂直对齐问题)、flex-grow 、flex-shrinK (图片容器不想它随便改变，就使用次属性)，比如flex-direction当此属性值为column column-reverse(垂直轴)时，可以解决一个困扰我们的问题，当内容太少，footer会跳上来，而我们又想固定footer在底部，当内容增加时，自动撑开，而又不想使用position: fixed。
当然，用途可不止这么点，还待前端同学们自己去挖掘，通过此博客不难看出，每一个知识点如果要细分的话，是需要大量的时间去研究的，前端之路任重而道远，加油！