Html flex 属性在 IE 中不起作用

flex property not working in IE

提问by Dizz

I have been unable to determine why flexbox is not working in IE 11.

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

For testing, I sourced a very simple flexbox layout from CodePen and have pasted the information below.

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

Chrome works as intended; IE11 fails.

Chrome 按预期工作；IE11 失败。

Image of layout-success running on Chrome:

在 Chrome 上运行的 layout-success 图片：

Image of layout-failure on IE11

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

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

回答by Michael Benjamin

IE has a problem parsing the flexproperty.

IE 解析flex属性时出现问题。

Here are a few workarounds that have worked for me:

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

• Use the long-hand properties instead of the shorthand.

  Instead of something like this: flex: 0 0 35%.

  Try this:

  • flex-grow: 0
  • flex-shrink: 0
  • flex-basis: 35%

• 使用简写属性而不是简写。

  而不是这样的：flex: 0 0 35%.

  尝试这个：

  • flex-grow: 0
  • flex-shrink: 0
  • flex-basis: 35%

---

---

• Make sure flex-shrinkis enabled.

  So instead of this: flex: 0 0 35%

  Try this: flex: 0 1 35%

  (In other cases flex-shrinkneeds to be disabled: Flex item overlaps another item in IE11)

• 确保flex-shrink已启用。

  所以而不是这个： flex: 0 0 35%

  尝试这个： flex: 0 1 35%

  （在其他情况下flex-shrink需要禁用：Flex 项目与 IE11 中的另一个项目重叠）

---

---

• Careful with percentage and unitless values with flex-basis

  This may depend on your version of IE11. Behavior appears to vary.

  Try these variations:

  • flex: 1 1 0
  • flex: 1 1 0px
  • flex: 1 1 0%

• 小心使用百分比和无单位值 flex-basis

  这可能取决于您的 IE11 版本。行为似乎各不相同。

  试试这些变化：

  • flex: 1 1 0
  • flex: 1 1 0px
  • flex: 1 1 0%

Beware!Certain css minifiers will replace 0pxwith 0, which can be a really annoying thing to debug (however, they won't change 0%for some reason).

谨防！某些 css minifiers 将替换0px为0，这对于调试来说可能是一件非常烦人的事情（但是，0%由于某种原因它们不会改变）。

More details here:

更多细节在这里：

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

• flexbox 中的图像行为（嵌入在列中的行）
• 为什么速记 flex 属性在 IE 中的行为与长手属性不同？

---

---

• Instead of flex: 1use flex: auto(or add in flex-basis: auto)

  If you're using flex: 1in flex-direction: row(such as on larger screens), and you switch to flex-direction: columnin a media query (let's say for mobile devices), you may find that your flex items collapse.

  In your media query, add flex-basis: auto. This will override the flex-basisvalue in the flex: 1rule (which is usually 0, 0pxor 0%, depending on the browser).

  Using flex: autoshould also work, which is short for:

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

• 而不是flex: 1使用flex: auto（或添加flex-basis: auto）

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

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

  使用flex: auto也应该有效，它的缩写是：

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

---

---

• Use old-fashion width/ heightproperties instead of flex.

• 使用旧式width/height属性而不是flex.

---

---

• Use blocklayout instead of flexlayout.

  You don't need to completely abandon flex layout. But for a particular container you may be able to get the job done with display: blockinstead of display: flex; flex-direction: column.

  For example, in needing to use the padding trickto responsively embed a video in a flex item, the obstacle I faced was that some browsers don't work well with percentage padding (or margin) in a flex container.

  To make it work I switched the displayvalue on the flex item from this:

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

  to this:

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

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

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

  例如，在需要使用padding 技巧将视频响应地嵌入到 flex item 时，我面临的障碍是某些浏览器不能很好地处理 flex container 中的百分比填充（或边距）。

  为了使它工作，我display从这里切换了 flex 项目上的值：

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

  对此：

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

回答by Embedded_Mugs

For me, using

对我来说，使用

  flex: 1 1 auto;

instead of

代替

  flex: 1;

solved the flex issue on IE 11.

解决了 IE 11 上的 flex 问题。

回答by akshay kanyan

Just use flex:1 0 auto;. It will work.

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

回答by Valentine Shi

As in @Michael_B answer, limit the growth with Flexbox flexproperty: flex: 0 1 (1/n - b)taken in % value, where nis the number of flex items in a row and bis the gap that you want to see between flex items in IE.

正如@Michael_B 的回答一样，使用 Flexboxflex属性限制增长：flex: 0 1 (1/n - b)以 % 值取值，其中n是一行中的 flex 项目数，b是您希望在 IE 中看到的 flex 项目之间的差距。

On the flex items along with flexproperty above use the max-widthproperty with percentage value of 1/n - b.

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

In your case the generalized CSS for the flex item would be:

在您的情况下，弹性项目的通用 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;
}

In actual case with 5 items / row there will be (1/5) * 100% - 1% = 19%=> max-width: 19%and flex: 0 1 19%;.

在实际情况下，每行 5 个项目将有(1/5) * 100% - 1% = 19%=>max-width: 19%和flex: 0 1 19%;.

Play with bparameter to make flex items short enough to allow flex: wrap;work.

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

回答by Raa Vijay

In my case, the CSS minifier rejects the pxunit of the last argument in -ms-flexshorthand rule, I tried using %unit and it works fine.

就我而言，CSS minifier 拒绝速记规则中px最后一个参数的单位-ms-flex，我尝试使用%unit 并且它工作正常。