工欲善其事必先利其器(多学一点知识,少写一行代码:)

布局神器-弹性盒flex

（因为学了，于是写了出来）
弹性盒是无需复杂计算的小规模的布局模块。既然是布局，就会有外部容器(兵长)和内部项目(小兵)。现在这个队伍已发展到第三代flex啦~

专业术语

首先要明确的一点，以下所说为无旋转的正常视图。
main:主轴（水平方向。可以理解为x轴）
cross:侧轴（垂直方向。可以理解为y轴）
配个图，理解下（其实不理解也没事_{知道有这么个东西就ok}~）

flex_terms.png

注意事项

多列模块中的column-*属性对弹性子元素无效。
float 和 clear 对弹性子元素无效。使用 float 会导致 display 属性计算为 block.
vertical-align 对弹性子元素的对齐无效。

关于容器container（兵长）

需要配备 display:flex/inline-flex（块/内联）才会被浏览器认可为是容器
（就像是没看到自由之翼谁知你是调查团的感觉~）

容器有6个属性（兵长特技：不同的阵列有不同的威力~）

flex-direction(排列方向，起点：上下左右)
row
row-reverse
column
column-reverse
flex-wrap(换行方式)
nowrap 一行
wrap 正序
wrap-reverse 倒序
flex-flow(direction和wrap的简写，默认row nowrap)
justify-content(单行水平对齐方式)
flex-start 左对齐
flex-end 右对齐
center 居中对齐
space-between 分散对齐
space-around 等距分散对齐
align-items(单行垂直对齐方式)
flex-start 头部对齐
flex-end 尾部对齐
center 中间对齐
baseline 基准线对齐（第一行文字）
stretch 头尾对齐（如果项目未设置高度或设为auto，将占满整个容器的高度）
align-content(多行垂直对齐方式)
flex-start 头部对齐
flex-end 尾部对其
center 中间对齐
space-between 分散对齐
space-around 等距分散对齐
stretch 头尾对齐

关于项目item（小兵）

容器内部的子元素就是项目了

项目也有6个属性（小兵的特技）

order（排序值。数值越小，排列越靠前，默认为0）
flex-grow（放大比例，默认为0，即如果存在剩余空间，也不放大）
flex-shrink（缩小比例，默认为1，即如果空间不足，该项目将缩小。值为0，不受影响）
flex-basis（预设宽度，默认值为auto，即项目的本来大小）
flex (grow, shrink和basis的简写，默认为0 1 auto。后两个属性可选|该属性有两个快捷值：[auto (1 1 auto) ]和 [none (0 0 auto)])
align-self（自身对齐方式；默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。）

版本及兼容性(发展史)

第三代：flex(优势：各种新技术)
第二代：flexbox（好像没啥优势）
第一代：box（优势：支持老版本，包括微信内置浏览器- -!）

弹性盒兼容性.jpg

由图可知，父级容器最保险的兼容性写法，应该是

.flex-container{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

利用sass的@mixin简易化书写

栗子1.父级容器

  @mixin flex-container() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  }

栗子2.子级项目排序

  @mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
  }

栗子3.子级项目缩放及预设宽度

  @mixin flex-item($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
  }

善假于物:弹性盒flex