伸缩项目的父元素:
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