flex布局

父容器.parent-8个设置项

.parent{display: flex;flex-direction: row|row-reverse|column|column-reverse                                 // 决定子元素的排列方式flex-wrap: nowrap|wrap|wrap-reverse                                                   // 决定子元素的换行方式flex-flow: flex-flow是flex-direction和flex-wrap的缩写                                   // 默认值为：row nowrapjustify-content: flex-start|flex-end|center|space-between|space-around|space-evenly   // 决定子元素在x轴的对齐方式align-items: flex-start|flex-end|center|stretch|baseline                              // 决定子元素在y轴的对齐方式align-content: flex-start|flex-end|center|space-between|space-around|space-evenly|stretch     // 多行子元素在y轴的排列方式// stretch，如果子元素未设置高度或者设置为auto，则撑满整个父容器；如果设置了高度，则stretch不生效gap: 
}

子元素.child-6个设置项

.child{flex:         // flex是flex-grow、flex-shrink、flex-basis3个元素的简写，默认值为0 1 autoflex-grow:    // 放大比例，默认为0，0则代表不放大。放大比例，是相对于剩余空间。flex-shrink:  // 缩小比例，默认为1，1则代码不缩小flex-basis:   // width的替代品，用来定义子元素的宽度// 最终优先级：元素的最大最小宽高（max-width/min-width等）> flex-basis > 普通宽高// http://www.lvyestudy.com/css3/flex-basisorder:        // 数值越小，排列越靠前，默认为0align-self:   // 父容器设置了align-items属性，通过子元素的align-self重写
}

只有当所有子元素宽度之和小于弹性盒子的宽度时，flex-grow才会生效，而此时flex-shrink无效；
只有当所有子元素宽度之和大于弹性盒子的宽度时，flex-shrink属性才会生效，而此时flex-grow无效。
也就是说，flex-grow和flex-shrink是互斥的，不可能同时生效。
参考了：http://www.lvyestudy.com/css3/flex-shrink