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;
html的flex布局⽗容器中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%。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。