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 时出现问题属性(property)。

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

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

  而不是这样的: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: 1使用 flex: auto (或添加 flex-basis: auto )

  如果您使用 flex: 1在 flex-direction: row (例如在大屏幕上)，然后切换到 flex-direction: column在媒体查询中(比如移动设备)，您可能会发现 flex 元素折叠起来。

  在您的媒体查询中，添加 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布局。

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

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

  为了让它工作，我切换了 display flex 元素的值(value)来自:

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

  为此:

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