Question

我无法确定为什么flexbox在IE 11中不起作用。

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

Chrome按预期工作; IE11失败了。

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

IE11上布局失败的图像

＆＃13;

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

＆＃13;

<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

＆＃13;

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

Answer 1

IE在解析flex属性时遇到问题。

以下是一些对我有用的解决方法：

使用长手属性而不是速记。

而不是像这样：flex: 0 0 35%。

试试这个：
- flex-grow: 0
- flex-shrink: 0
- flex-basis: 35%

确保flex-shrink已启用。

所以不要这样：flex: 0 0 35%

试试这个：flex: 0 1 35%

（在其他情况下，flex-shrink需要停用：Flex item overlaps another item in IE11）

谨慎使用flex-basis
的百分比和无单位值
这可能取决于您的IE11版本。行为似乎有所不同。

尝试以下变体：
- flex: 1 1 0
- flex: 1 1 0px
- flex: 1 1 0%

小心！某些css minifiers会将0px替换为0，这可能是一个非常烦人的调试（但是，它们不会改变{{1}由于某种原因）。

此处有更多详情：

取代0%使用flex: 1（或添加flex: auto）

如果您在flex-basis: auto中使用flex: 1（例如在较大的屏幕上），并在媒体查询中切换到flex-direction: row（例如，对于移动设备），您可以发现您的弹性项目崩溃。

在媒体查询中，添加flex-direction: column。这将覆盖flex-basis: auto规则中的flex-basis值（通常为flex: 1，0或0px，具体取决于浏览器）。

使用0%也应该有效，这是以下内容的简称：
- flex: auto
- flex-grow: 1
- flex-shrink: 1

使用旧式flex-basis: auto / width属性代替height 。

使用flex布局而不是block布局。

您无需完全放弃弹性布局。但对于特定的容器，您可以使用flex代替display: block来完成工作。

例如，在需要使用padding trick响应性地在Flex项目中嵌入视频时，我遇到的障碍是some browsers don't work well with percentage padding (or margin) in a flex container。

为了使其工作，我在此处切换了flex项目的display: flex; flex-direction: column值：
```
display
```
到此：
```
/* a flex item, also a nested flex container */
#footer-container > article {
    display: flex;
    flex-direction: column;
}
```

Answer 2

对我来说，使用

  flex: 1 1 auto;

而不是

  flex: 1;

解决了IE 11上的flex问题。

Answer 3

只需使用flex:1 0 auto;即可。它会起作用。

Answer 4

与@Michael_B答案一样，使用Flexbox flex属性限制增长：flex: 0 1 (1/n - b)采用％值，其中n是一行中的弹性项目数，{{1 }}是您希望在IE中的弹性项目之间看到的差距。

在弹性项目以及上面的b属性上，使用百分比值为flex的{{1}}属性。

在您的情况下，flex项目的通用CSS为：

max-width

在实际情况下，每行有5个项目，将有1/n - b => 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; }和(1/5) * 100% - 1% = 19%。

使用max-width: 19%参数使弹性项目足够短以允许flex: 0 1 19%;工作。

flex属性在IE中不起作用

4 个答案: