Html flex属性在IE中不起作用_Html_Css_Flexbox_Internet Explorer 11

Html flex属性在IE中不起作用

html css

Html flex属性在IE中不起作用,html,css,flexbox,internet-explorer-11,Html,Css,Flexbox,Internet Explorer 11,我一直无法确定为什么flexbox不能在IE 11中工作为了进行测试，我从CodePen获得了一个非常简单的flexbox布局，并粘贴了下面的信息 Chrome按预期工作；IE11失败了在Chrome上成功运行布局的图像： IE11上布局失败的图像正文{ 背景：#333；字体系列：helvetica；字体大小：粗体；字体大小：1.7rem； } 保险商实验室{ 列表样式：无； } 李{ 背景：火红；高度：200px；文本对齐：居中；边框：2个实心贝壳；颜色：贝壳；利润

我一直无法确定为什么flexbox不能在IE 11中工作

为了进行测试，我从CodePen获得了一个非常简单的flexbox布局，并粘贴了下面的信息

Chrome按预期工作；IE11失败了

在Chrome上成功运行布局的图像：

IE11上布局失败的图像

正文{
背景：#333；
字体系列：helvetica；
字体大小：粗体；
字体大小：1.7rem；
}
保险商实验室{
列表样式：无；
}
李{
背景：火红；
高度：200px；
文本对齐：居中；
边框：2个实心贝壳；
颜色：贝壳；
利润率：10px；
flex：自动；
最小宽度：120px；
最大宽度：180像素；
}
.flex{
显示器：flex；
调整内容：灵活启动；
柔性包装：包装；
}


一,
二,
三,
四,
五,
六,
七,
八,
九,
十,

IE在解析

flex

属性时遇到问题

以下是一些对我有效的变通方法：

使用长手属性而不是速记属性。
而不是像这样：
```
flex:035%
```
试试这个：
- ```
flex-grow:0
```
- ```
flex-shrink:0
```
- 弹性基准：35%

确保启用了弹性收缩功能。
因此，与此相反：
```
flex:035%
```
试试这个：
```
flex:0 1 35%
```
（在其他情况下，需要禁用弹性收缩：）

使用弹性基础小心百分比和无单位值
这可能取决于您的IE11版本。行为似乎有所不同
试试这些变化：
- ```
flex:110
```
- ```
flex:1 10px
```
- ```
flex:10%
```

当心某些css迷你程序将用

替换

0px

，这对调试来说是一件非常烦人的事情（但是，出于某种原因，它们不会改变

0%

）

详情如下：

代替
flex:1
使用
flex:auto
（或添加
flex-basis:auto
）
如果您在
```
flex-direction:row
```
中使用
```
flex:1
```
（例如在更大的屏幕上），并且在媒体查询中切换到
```
flex-direction:column
```
（比方说对于移动设备），您可能会发现您的flex项折叠了
在媒体查询中，添加
```
flex-basis:auto
```
。这将覆盖
```
flex:1
```
规则中的
```
flex-basis
```
值（通常为
```
0
```
、
```
0px
```
或
```
0%
```
，具体取决于浏览器）
使用
```
flex:auto
```
也应该可以工作，它是：
- ```
flex-grow:1
```
- ```
flex-shrink:1
```
- ```
flex-basis:auto
```

使用旧式的
宽度
/
高度
属性，而不是
弹性

使用
block
布局而不是
flex
布局。
您不需要完全放弃flex布局。但是对于特定的容器，您可以使用
```
display:block
```
而不是
```
display:flex；弹性方向：列
```
例如，在需要使用将视频响应性地嵌入到flex项目中时，我面临的障碍是
为了使其正常工作，我从以下位置切换flex项上的
```
显示
```
值：
```
/* a flex item, also a nested flex container */
#footer-container > article {
    display: flex;
    flex-direction: column;
}
```
为此：
```
#footer-container > article {
    display: block;
}
```

  flex: 1 1 auto;

  flex: 1;

flex:10自动。它将起作用。
如@Michael_B answer中所述，使用Flexboxflex
属性限制增长：flex:01（1/n-B）
采用%值，其中n
是一行中的flex项的数量，B
是您希望在IE中看到的flex项之间的差距
在flex项上以及上面的flex
属性使用max width
属性，百分比值为1/n-b

在您的情况下，flex项的通用CSS是：
li {
    // ... the remaining code from your snippet
    // Calculate the following manually and insert or use CSS preprocessor that does math for you.
    // See the formula explanation above.
    max-width: (your flex container max-width / 2) * 100% - b; 
    flex: 0 1 (your flex container max-width / 2) * 100% - b;
}

在实际情况下，每行5个项目将有（1/5）*100%-1%=19%
=>最大宽度：19%
和弹性：0 1 19%
使用b
参数使flex项目足够短，以允许flex:wrap工作。
在我的例子中，CSS缩略器拒绝了-ms flex
速记规则中最后一个参数的px
单元，我尝试使用%
单元，它工作得很好。
好，这就是用flex:auto
代替flex:auto
的意思，正如flex:auto
翻译成的那样，flex:11 auto
这个答案是金色的！：D谢谢你，马恩！这个答案值得起立鼓掌你好！你知道有一种polyfill可以将flex从速记转换为速记吗？从速记转换为多行定义是适合我的情况的。