flex 属性在 IE 中不起作用

Posted 2023-03-05

【中文标题】flex 属性在 IE 中不起作用

【英文标题】：flex property not working in IE

【发布时间】：2015-11-21 06:08:28

【问题描述】：

我一直无法确定为什么 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

【参考方案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;

【讨论】：

您好！你知道将 flex 从简写转换为简写的 polyfill 吗？

从速记转移到多行定义对我的情况有用。

【参考方案2】：

对我来说，使用

  flex: 1 1 auto;

而不是

  flex: 1;

解决了 IE 11 上的 flex 问题。

【讨论】：

嗯，这就是 Instead of flex: 1 use flex: auto 的意思，正如flex: auto 的意思，flex: 1 1 auto

【参考方案3】：

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

【参考方案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; 工作。

【参考方案5】：

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