flex属性不能在IE中工作

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

为了testing，我从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> 

Answer 1

IE浏览器在parsingflex属性时遇到问题。

以下是适用于我的一些解决方法：

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

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

  尝试这个：

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

---

• 确保flex-shrink已启用。

  所以，而不是： flex: 0 0 35%

  试试这个： flex: 0 1 35%

---

• 小心百分比和无单位的价值以flex-basis

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

  尝试这些变化：

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

  更多细节在这里：

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

---

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

  如果您在flex-direction: row （如在较大的屏幕上）使用flex: 1 ，并且在媒体查询（假设为移动设备）中切换到flex-direction: column ，则可能发现您的flex项目坍方。

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

  使用flex: auto也应该工作，这是简称：

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

---

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

---

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

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

  例如，在需要使用填充技巧来响应地将videoembedded到flex项目中时，我遇到的障碍是某些浏览器在flex容器中的百分比填充（或边距）不能很好地工作 。

  为了使它工作，我切换了flex项目上的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上的弹性问题。