flex弹性布局

MDN文档相关链接
以下做简单学习总结：

flex容器：主轴、交叉轴

display：flex
flex-direction：指明主轴方向
jsutify-content:指明主轴对齐方式
align-items:指明交叉轴对齐方式
flex-wrap ：默认为 nowrap。

flex容器内的元素：元素分配容器主轴的大小

flex-basis：默认为auto，自动检测宽度，无设置宽度属性则为内容尺寸。也可以自己设置缩放的基准值
flex-grow：空白部分按比例分配扩展
flex-shirnk：溢出部分按比例分配缩小，注意还有最小尺寸的问题
以上三个属性的简写flex：flex-grow，flex-shrink，flex-basis。
例如：flex:1,1,200px 是flex:2,1,200px的二分之一大小