善假于物:弹性盒flex

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

布局神器-弹性盒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;
}