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

布局神器-弹性盒flex

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

专业术语

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

注意事项

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

关于容器container（兵长）

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

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

flex-direction(排列方向，起点：上下左右)
- row
- row-reverse
- column
- column-reverse

旧版 box-orient：horizontal | vertical

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（优势：支持老版本，包括微信内置浏览器- -!）

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

.flex{
  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