html - 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 基础: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 元素崩溃了。

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

  使用 flex: auto 也应该可以，它是以下内容的缩写:

  • flex 增长:1
  • flex-shrink: 1
  • flex 基础:自动

---

• 使用老式的 width/height 属性代替 flex。

---

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

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

  例如，在需要使用padding trick以响应方式将视频嵌入 flex 元素中，我面临的障碍是 some browsers don't work well with percentage padding (or margin) in a flex container .

  为了让它工作，我将 flex 元素上的 display 值切换为:

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

  为此:

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