工欲善其事必先利其器(多学一点知识,少写一行代码:)
布局神器-弹性盒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;
}
