flex弹性盒布局在ie浏览器中的那些兼容性问题

1，在IE10和IE11中，父容器中flex-direction:column 和 align-items:center，这俩属性同时存在， 子容器内容过多会溢出容器。

        解决方案：给子容器加max-width: 100%

2，IE10和IE11下，父容器flex-direction:row，子容器内容过多会溢出容器

        解决方案：给子容器加max-width: 100%

3，IE11中，父容器flex-direction:column，img无法保持宽高比缩放

        解决方案：给img包一层div

4，IE10和IE11中，父容器flex-direction:row，img无法保持宽高比缩放

        解决方案：IE10：父容器设置align-items IE11:a.给img包一层div；b.容器设置align-items

5，IE10和IE11中，flex-direction: row，子容器设置flex-basis确切值（auto除外），子容器中 box-sizing:border-box不会生效

        解决方案：

            a.子容器中flex-basis设置auto，且设置width：100%
             b. 给子项再包裹一个容器，把这个容器当成flex容器的子项，在这个容器上设置 flex: 0 0                 100%。

6，IE10和IE11: 内敛元素不能作为弹性伸缩项目，包括:before 和 ::after 这些伪类元素。

        IE11修复了这个bug，但是 :before 和 ::after 仍然不能作为伸缩弹性项目。
         解决方案：给内联元素加个 display: block; 即可。

7，给flex简写加 !important，在IE10，只对前两个参数有效，第三个参数无效

        解决方案：这个bug在IE11修复。而在IE10，再单独写上flex-bsis即可