浏览器适用性：除部分ie浏览器不支持其他已全部支持(can i use)
（传统盒模型主要依靠position+display+float） 简介：09年w3c提出的一种的弹性盒模型用以方便解决一些特殊布局(比如垂直居中要靠定位和transform才能解决而flex只需要align-items:center即可)弹性盒模型的出现逐渐演出一套新的布局方案flex布局
属性 display:flex:开启弹性布局 inline-flex:将元素变为伸缩容器并成为行内块(行内块元素在代码中换行会出现空隙所以如果需要两个flex块平行一般在body中添加flex属性)
一个元素可以既是容器又是项目，设置flex后，子项目自动块状化并成为伸缩项目(只有子项目其后代不是)
flex-direction:row左到右/row-reverse/column上下/column-reverse(主轴改变侧轴随之改变)
flex-wrap:nowrap/wrap/wrap-reverse反向换行(从下往上换行)
flex-flow复合属性,写上面两个属性值,没有顺序要求
justify-content:主轴对齐方式flex-start/flex-end/center/space-between均匀分布两端对齐/space-around均分分布中间距离是两边距离的两倍/space-evenly均匀分布中间距离等于两边距离
align-items:侧轴单行对齐方式flex-start/flex-end/center/baseline伸缩项目第一行文字基线对齐/stretch:默认值如果伸缩项目未设置高度将其高充满整个父容器
align-content:侧轴多行对齐方式flex-start/flex-end/center/space-between/space-evenly/space-between/stretch默认
元素水平垂直居中:父flex子margin：auto/父flex,justfy-content,align-items
flex-basis:浏览器根据此值计算主轴是否有富裕空间，主轴横向宽度失效，主轴纵向高度失效
flex-grow:定义伸缩项目放大比例如1,2,3则各占多余空间1/6,1/3,1/2默认值为0
flex-shrink:定义伸缩项目的压缩比例如容器400px三个项目为200px,flex-shrink设为:1,2,3各项所缩小得值为2002001(2,3)/200*6,默认值为1极限距离为内部元素的大小
grow,shrink,basis复合属性:flex:auto表11auto拉伸压缩不设基准长度 flex:1表110拉伸压缩基准长度为0 flex:none表00auto不可拉伸不可压缩不设基准长度 flex:0 auto表o1auto不可拉伸可压缩不设基准长度
align-self:单独调整项目的对齐方式默认值为auto继承父元素align-items的属性 older:定义项目的排列顺序值越小越靠前默认值为0
