flex 属性在 IE 中不起作用

Question

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

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

Chrome 按预期工作； IE11 失败。

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

IE11 布局失败的图片

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;
}

<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>

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 缩小器会将 0px 替换为 0，这可能是一件非常烦人的调试事情（但是，由于某种原因，它们不会更改 0%）。

更多细节在这里：

• Image behavior within flexbox (rows embedded in columns)
• Why does shorthand flex property behave differently than long hand properties in IE?

---

• 用flex: auto代替flex: 1（或添加flex-basis: auto）

  如果您在flex-direction: row 中使用flex: 1（例如在较大的屏幕上），并且在媒体查询中切换到flex-direction: column（假设是移动设备），您可能会发现您的弹性项目折叠.

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

  使用flex: auto 也应该可以工作，它是以下简称：

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

---

• 使用老式的width / height 属性而不是flex。

---

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

  你不需要完全放弃 flex 布局。但是对于特定的容器，您可以使用display: block 而不是display: flex; flex-direction: column 来完成工作。

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

  为了让它工作，我从这里切换了弹性项目上的display 值：

  /* a flex item, also a nested flex container */
  #footer-container > article {
      display: flex;
      flex-direction: column;
  }
  

  到这里：

  #footer-container > article {
      display: block;
  }
  

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 是连续弹性项目的数量，b 是您想要的间隙在 IE 中查看弹性项目之间的关系。

在弹性项目以及上面的flex 属性上，使用百分比值为1/n - b 的max-width 属性。

在您的情况下，弹性项目的通用 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% => max-width: 19% 和 flex: 0 1 19%;。

使用b 参数使弹性项目足够短以允许flex: wrap; 工作。

Answer 5

在我的例子中，CSS 缩小器拒绝 -ms-flex 速记规则中最后一个参数的 px 单元，我尝试使用 % 单元，它工作正常。