flexbox备忘

伸缩项目的父元素:

　　display:flex || display:inline-flex
　　fiex-direction: row(默认) | row-reverse | column | column-reverse
　　flex-wrap : nowrap(默认) | wrap | wrap-reverse
　　flex-flow(flex-direction+flex-wrap): row nowrap (默认)

　　主轴对齐方式（横向）：
　　　　justify-content: flex-start（默认） | center | flex-end
　　　　　　　　　　　　space-between | space-around

　　侧轴对齐方式（竖向）：
　　　　align-items:flex-start | center | flex-end
　　　　baseline | stretch(默认)

　　多行，竖向(必须设置flex-wrap:wrap才有效):
　　　　align-content:flex-start | center | flex-end
　　　　　　　　　　　space-between | space-around
　　　　　　　　　　　stretch(默认)

伸缩项目的子元素:
order: 0
flex-grow:1（不可以有负数） 放大一定的倍数
flex-shrink:1（不可以有负数） 缩小一定的倍数
flex-basis:0 数字px,百分比（不可以负数） 剩余的空间按比率进行伸缩

flex: flew-grow flew-shrink flew-basis的组合;

flex:0 1 auto == flex:initial == flex:0 auto(默认值);
flex:none == flex:0 0 auto;

flex:auto == flex:1 1 auto;

align-self(跟align-items一样):
flex-start | center | flex-end | baseline | stretch

参考资料：

http://www.w3cplus.com/css3/a-guide-to-flexbox.html

http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html

https://www.w3.org/html/ig/zh/css-flex-1/#flex-basis

https://segmentfault.com/q/1010000004080910