Flex布局详解

任何元素都可以使用flex布局（弹性布局），例如：块元素可以用display:flex，行内元素用display:inline-flex;不同浏览器可以使用不同的前缀flex，比如-webkit-flex,-o-flex,-moz-flex,-ms-flex,分别对应谷歌，欧朋，火狐，ie浏览器。
采用flex容器的元素，称为容器。所有子元素就变成其容器成员，即为flexItem项目。

针对容器有六个属性：

flex-direction属性决定主轴的方向，即flexItem项目的方向。其值有row(默认值)，水平。Row-reverse水平镜像反转。column垂直，column-reverse垂直镜像反转。

Flex-wrap属性决定flexItem项目的换行方式，其值有nowrap不换行（默认值），wrap换行，wrap-reverse换行镜像反转。

flex-flow属性是flex-directioin和flex-wrap属性的缩写，默认值位row nowrap。
Justify-content属性是项目的主轴对齐方式，其值有flex-start首对齐，flex-end尾对齐。center中间对齐，flex-between间距对齐。Flex-around环绕对齐。

align-items属性是项目的交叉轴（垂直轴）对齐方式，其值有flex-start首对齐，flex-end尾对齐。Center中间对齐，stretch拉伸对齐，baseline基线对齐。

align-content属性偏复杂（不常用），是项目内容的多根交叉轴（垂直轴）对齐方式，其值有flex-start,flex-end,center,stretch,space-between,space-around。

针对项目的属性（排序，项目空间大小）:

order属性为项目的排列顺序（不常用）。其值为interger，越小越往前。

flex-grow属性为定义项目的放大比例（常用）。其值为nunber。

计算方法：(总宽度-占用宽度)*（单项flex-grow/项目的flex-grow值的和）

flex-shrink属性为定义项目的缩小比例（不常用）。其值为number。

计算方法：value = box1.width * box1.flex-shrink + box2.width * box2.flex-shrink + box3.width * box3.flex-shrink

box1.width = box1.width - box1.width * box1.flex-shrink / value * 总宽度溢出去的宽度

box2.width = box2.width - box2.width * box2.flex-shrink / value * 总宽度溢出去的宽度

box3.width = box3.width - box1.width * box3.flex-shrink / value * 总宽度溢出去的宽度

flex-basis属性为在分配项目多余空间前，先占据主轴空间。

flex属性为flex-grow,flex-shrink,flex-basis的缩写，默认值位0 1 auto。后两个属性可选。

align-self属性为允许单个项目由于其他项目不同的对齐方式，可覆盖align-items属性。默认值位auto。跟align-items的属性一样flex-start,flex-end,center,stretch,baseline以及auto。

底下的内容就是，纯码实现的。