CSS3 Flexbox 小结

* Flexbox前后有三个版本，较老的浏览器会存在兼容性问题。IE11部分支持，IE10部分支持（需加-ms-）。

* CSS的columns在伸缩容器上无效；float、clear、vertical-align在伸缩项目上无效；

最新版本Flexbox的使用：

伸缩容器display: flex | inline-flex

伸缩项目：伸缩容器的每个子元素（需要盒修复的元素除外）；

伸缩流方向flex-direction: row | row-reverse | column |column-reverse

伸缩换行flex-wrap：nowrap | wrap | wrap-reverse

复合属性flex-flow：<' flex-direction '> || <' flex-wrap '>

主轴对齐justify-content：flex-start | flex-end | center |space-between | space-around

测轴对齐align-items（容器）：flex-start | flex-end | center |baseline | stretch

             align-self（项目）：auto | flex-start | flex-end | center | baseline | stretch

* 如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

堆栈伸缩行align-content：flex-start | flex-end | center |space-between | space-around | stretch

* 当伸缩容器的侧轴还有多余空间时，align-content可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。本属性在只有一行的伸缩容器上没有效果。 

flex-start：各行/列向弹性盒容器的起始位置堆叠。 flex-end：各行/列向弹性盒容器的结束位置堆叠。 center：各行/列向弹性盒容器的中间位置堆叠。 space-between：各行/列在弹性盒容器中平均分布，紧贴容器两端。 space-around：各行/列在弹性盒容器中平均分布，容器两端保留间距。 stretch：各行将会伸展以占用剩余的空间。 baseline：伸缩项目的基线。

justify-content	align-content	align-items

伸缩性flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

扩展比率flex-grow：<number>（默认值为0），根据此比率分配剩余空间。

收缩比率flex-shrink：<number>（默认值为1），超出容器按比率移除。

基准值flex-basis：<length> | <percentage> | auto | content

显示顺序order：<number>（默认值为0），伸缩容器会从序号最小的项目开始布局。

/* 图片来源于 @大漠 《图解CSS3》

   属性总结自 @飘零雾雨 《CSS参考手册》 */