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属性时出现问题。

以下是一些对我有效的变通方法：

• Use长手属性而不是速记。

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

试试这个：

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

​

• Make确保已启用flex-shrink 。

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

试试这个：flex: 0 1 35%

(在其他情况下，需要禁用flex-shrink：Flex item overlaps another item in IE11)

带百分比值和无单位值的

• Careful flex-basis

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

试试这些变体：

- `flex: 1 1 0`
- `flex: 1 1 0px`
- `flex: 1 1 0%`

​

要当心！某些css will将用0替换0px，这可能是一件非常烦人的事情(但是，由于某些原因，它们不会改变0% )。

更多详细信息请点击此处：

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

使用

• Instead flex: auto flex-basis: auto**)** (或在flex-basis: auto**)**中添加)使用flex: auto的

如果您在flex-direction: row中使用flex: 1 (例如在较大的屏幕上)，并且在媒体查询中切换到flex-direction: column (比方说在移动设备上)，您可能会发现flex项目崩溃。

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

使用flex: auto也可以，它是的缩写

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

​

• Use传统的width height flex.

/ / 属性而不是属性

• Use block flex layout而不是flexlayout。

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

例如，在需要使用padding trick在flex项中响应地嵌入视频时，我所面临的障碍就是some browsers don't work well with percentage padding (or margin) in a flex container。

为了使其正常工作，我将flex项上的display值从如下位置切换为：

显示flex项，也是嵌套的flex容器*/ # /* - container >文章{ display: flex；flex-direction:列；}

要这样做：

#页脚-容器>文章{ display: block；}

Answer 2

对我来说，使用

  flex: 1 1 auto;

而不是

  flex: 1;

解决了IE 11上的flex问题。

Answer 3

只需使用flex:1 0 auto;即可。看起来不错。