IE11中flex布局兼容问题总结

flex:1解析问题

原因：

//在谷歌中flex:1;会解析为
flex-grow:1;
flex-shrink:1;
flex-basis:0%;
//在IE中被解析为
flex-grow:1;
flex-shrink:1;
flex-basis:0px;

解决：将flex:1; 更改为flex: 1 1 auto;

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

原因：
IE中flex-shrink 的默认值为 0，既空间不足，项目不缩小，就算设置flex-shrink:1;，因为上述两个属性同时存在，IE 依旧固执地不缩小这个项目
解决：
给子项目加max-width:100%;或取消其中一个，并把flex-shrink设置为1

flex布局不支持min-height属性

解决办法：设置高度类似height:calc(100% - 100px)，减号两边要有空格否则无效

父容器flex-direction:column，img设置宽或高危auto时无法保持宽高比缩放

解决办法：给img包一层div

父容器flex-direction:row，img无法保持宽高比缩放

解决办法：给img包一层div；或容器设置align-items

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

解决办法：
● 子容器中flex-basis设置auto，且设置width：100%；
● 给子项再包裹一个容器，把这个容器当成flex容器的子项，在这个容器上设置 flex: 0 0 100%。