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-basis: 35%

• 确保flex-shrink已启用.

  所以不是这样的: flex: 0 0 35%

  试试这个: flex: 0 1 35%

  (在其他情况下flex-shrink需要禁用:Flex项目与IE11中的另一项重叠)

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

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

  试试这些变化:

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

谨防!某些css minifiers将替换0px为0,这可能是一个非常烦人的调试(但是,它们不会0%因某些原因而改变).

更多细节在这里:

• flexbox中的图像行为(嵌入列中的行)
• 为什么速记flex属性的行为与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.

  例如,在需要使用填充技巧来响应地将视频嵌入到弹性项目中时,我遇到的障碍是某些浏览器在弹性容器中的百分比填充(或边距)不能很好地工作.

  为了使它工作,我display从这里切换了flex项目的值:

  /* 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上的flex问题.