注：这是我之前在微信公众号‘雨后的梦溪笔谈’ （yuhou5206）写的一篇文章，今天移至简书，原创文章转载请注明。
阮一峰flex布局篇网址:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html,
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
本篇基本参照阮一峰大神的内容,有一些地方有稍许改动加入个人观点,让我自己更易于理解.(其中原文中"交叉轴"在这里命做"侧轴").如果有时间建议参观面网址的原文,因为原文图片解析更加明了.
first:介绍
Flex布局:Flexible Box 弹性盒子布局,所以flex布局其实就是弹性盒子布局,就是弹弹弹,弹走鱼尾纹,那种布局.任何一个容器都可以指定为Flex布局.
支持浏览器:需要支持的浏览器是,IE10+,所以一般应用在移动端,如果要支持到IE8就要做处理.
second:开始
1.指定flex布局的两种方式,以及兼容webkit内核的浏览器.
(注意,当设置为Flex布局以后,子元素的float,clear和vertical-align的属性都将失效)
采用Flex布局的元素,称为Flex容器(flex container),简称"容器". 它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目".
每一个flex容器中都有两个轴,主轴(main axis) ,侧轴(cross axis) ,主轴的开始位置与边框的交叉点,叫做main start,结束位置叫做main end;侧轴的开始位置叫做cross start,结束位置叫做cross end. 项目的默认沿着主轴排列,单个项目占据主轴的空间叫做main size,占据交叉轴的空间叫做cross size.
2.容器的属性
以下六个属性是设置在容器上的.
flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content
2.1 flex-direction 属性
flex-direction属性决定主轴的方向,也就是项目排列的方向;
XXX:row(默认值):主轴为水平方向,起点在左端
XXX:row-reverse:主轴为水平方向,起点在右端
XXX:column:主轴为垂直方向,起点在上边际
XXX:column-reverse 主轴为垂直方向,起点在下沿
** 2.2 flex-wrap 属性**
默认情况下,项目都排在一条线(又称"轴线")上.flex-wrap空值的就是他的排列方式.
XXX:nowrap(默认值):不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
2.3flex-flow
flex-flow属性是flex-direction属性和flex-warp属性的简写形式,默认值为row nowrap,
也就是==>> flex-flow:flex-direction && flex-wrap
也就是这两种加起来,zzz,建议使用的时候用flex-flow,而不要单一写
2.4 justify-content属性
justify-content: flex-start | flex-end | center | space-between | space-around;
这里与之对应的是,开始,结束,居中,空白在之间,空白包围项目.
2.5 align-items
XXX:flex-start:侧轴的起点对齐
lex-end:侧轴的终点对齐
center:侧轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch(默认值):如果项目没有设置高度或设为auto,将占满整个容器的高度
2.6 align-content属性
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
XXX:flex-start:与侧轴的起点对齐
flex-end:与侧轴的终点对齐
center:与侧轴的中心点对齐
space-between:与侧轴两端对齐,轴线之间的间隔平均分布.
space-around:每根轴线两侧的间隔都相等.所以,轴线之间的间隔比轴线与边框的间隔大一倍
strech(默认值):轴线占满整个侧轴,塞满,就是这个意思
3.项目的属性,容器内部项目的属性
对应参数:order flex-grow flex-shrink flex-basis flex align-self
3.1 order属性
order属性定义项目排列顺序.数值越小,排列越靠前,默认为0
3.2 flex-grow 属性(扩展比例)
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都 为1，则前者占据的剩余空间将比其他项多一倍
3.3 flex-shrink 属性(收缩率)
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。(注:负值对该属性无效)
3.4 flex-basis 属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
3.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
后两个属性可选.建议优先使用这个属性，而不是单独写三个分离的属性.
3.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
变量:auto flex-start flex-end center baseline stretch
4.一些实际简单应用,以及代码.
4.1骰子
一点
（骰子图片均来自原网)
重要代码
两点
重要代码
三点
重要代码
四点
重要代码
五点
源网没有图,这里,自己搞的就不弄什么阴影渐变圆角了....
重要代码
六点
重要代码
4.2流式布局
流式布局,就是每个项目固定,但是会自动分行
重要代码
注：这是我之前在微信公众号‘雨后的梦溪笔谈’ （yuhou5206）写的一篇文章，今天移至简书，原创文章转载请注明。
(此节完)
