flex属性不工作在IE11 [英] flex property not working in IE11

问题描述

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

对于测试，我从Codepen采购了一个非常简单的flexbox布局，并粘贴了信息

Chrome正常运行，IE11失败。

Chrome上运行的布局成功图片： / p>

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;颜色：贝壳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

任何帮助解决都非常感谢。谢谢。

解决方案

IE 11在解析 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：1 使用 flex：auto （或添加 flex-basis：auto ）

  
  
  

  如果您在中使用 flex：1 flex-direction：row （例如在较大的屏幕上），并且在媒体查询（比如说移动设备）中切换到 flex-direction：column

  
  
  

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

  
  
  

  使用 flex：auto 也可以使用。







---






• 使用旧时代 width / c 。


>



---







• 使用阻止布局而不是 flex 布局。

  
  
  

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

  
  
  

  例如，在需要使用 padding trick 来响应地在flex项目中嵌入视频，我遇到的障碍是一些浏览器在弹性容器中使用百分比填充（或边距）不能很好地工作。

  
  
  

  为了使其工作，我切换了

    / * flex项目，也是一个嵌套的flex容器* / 
  ＃footer-container> article {
   display：flex; 
   flex-direction：column; 
  } 
    

  ：

   ＃footer-container> article {
   display：block; 
  } 
    






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

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

Chrome works as intended, IE11 fails.

Image of layout-success running on Chrome:

Image of layout-failure on 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

Any help to resolve is greatly appreciated. Thanks.

解决方案

IE 11 has a problem parsing the flex property.

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%

---

• Make sure flex-shrink is enabled.

  So instead of this: flex: 0 0 35%

  Try this: flex: 0 1 35%

---

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

  If you're using flex: 1 in flex-direction: row (such as on larger screens), and you switch to flex-direction: column in 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-basis value in the flex: 1 rule (which is usually 0, 0px or 0%, depending on the browser).

  Using flex: auto should also work.

---

• Use old-fashion width / height properties instead of flex.

---

• Use block layout instead of flex layout.

  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: block instead of display: flex; flex-direction: column.

  For example, in needing to use the padding trick to 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 display value 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;
  }
  

这篇关于flex属性不工作在IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！