display:flex笔记

1、flex在ie浏览器的bug：内容溢出，不会自动换行。解决方案：设置 max-width: 100%。该问题和 flex-shrink 的默认值有关系，默认为1，但是IE默认为 0，既空间不足，项目不缩小。

一、弹性布局：flex的属性
1、display:-webkit-box和disply:flex对比

//有些手机内核只支持老版本
display:-webkit-box;//旧版本写法
-webkit-box-orient:horizontal;//控制主轴和侧轴分别是哪一根
-webkit-box-driection:reverse;//控制主轴方向
/**start富余空间在右边（x）,下边（y）
   end 富余空间在左边（x）,上边（y）
   center 富余空间在两边
   justify富余空间在项目之间
**/
-webkit-box-pack:start;//主轴富余空间，
/**start富余空间在右边（x）,下边（y）
   end 富余空间在左边（x）,上边（y）
   center 富余空间在两边
**/
-webkit-box-align:start;//侧轴富余空间，

/*弹性空间管理,将主轴上的富余空间按比例分配到项目的width上*/
-webkit-box-flex: 1;



//新版
 disply:flex;
 flex-driection:column;//控制主轴和侧轴分别是哪一根,row代表横轴
 flex-driection:column-reverse;//控制主轴和侧轴分别是哪一根,以及主轴方向
 /** flex-start     富余空间在主轴的正方向
    flex-end        富余空间在在主轴的反方向
    center          富余空间在在主轴的两边
    space-between   富余空间在项目之间
     space-around(box没有) 富余空间在项目两边
**/
 justify-content:flex-start;
 
  /** flex-start     富余空间在侧轴的正方向
    flex-end        富余空间在在侧轴的反方向
    center          富余空间在在侧轴的两边
   baseline (box没有)  按基线对齐
    stretch(box没有)   等高布局
**/
 align-items:flex-start;
/*弹性空间管理,将主轴上的富余空间按比例分配到项目的width上*/
flex-grow: 1;

老版本富余空间：

新版本富余空间：