ie10和flexboxes？ （恶梦）

Question

不幸的是，我必须使我的网站代码与Internet Explorer 10兼容，并且即使在他们的官方网站上阅读文档之后我也遇到了一些问题

这是我的css代码：

.uberflex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;

    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;

    display: -ms-flexbox;
    -ms-flex-flow: column wrap;
    -ms-justify-content: flex-start;
    -ms-align-items: flex-start;
}

据我所知，ie10支持flexbox，但只有'-ms-'前缀，我已经放在这里了。在ie10中检查控制台后，它看到“display：-ms-flexbox;”但没有其他“-ms-”预先固定好的东西？任何人都可以澄清为什么会这样吗？

谢谢！ ： - ）

Answer 1

是的，IE 10的flexbox是一场彻头彻尾的噩梦。

这里有一些关于从几个站点中抓取的IE 10 Flexbox支持的提示（this一个非常有帮助）：

---

首先 - 一个非常有用的标志（可以放在所有元素上）：

• 用于隔离IE10特定CSS的标志

  .lt-ie11 & { }

---

以下定义应放在容器元素

中

• 定义Flex容器

  display: -ms-flexbox;

• 水平对齐：

  -ms-flex-pack: start/end/center/justify;

。

• 垂直对齐

  -ms-flex-align: start/end/center/stretch/basline;

---

以下定义应放在子元素（“item”）

中

• 元素排序

  订单号可以是正数或负数。数字越小，越接近容器的开始元素将出现

  -ms-flex-order [number]

• 设置项目的增长/缩小/首选大小

  这是flexbox的一个重要概念，用于控制如何在flexbox容器的子元素之间划分额外或负（缺失）空间。

  基本上，数字越大，向首选大小添加的额外空间越多（在增长的情况下），或者从元素中减去更多的空间以使其适合（在收缩的情况下）。如果指定值为“0”，则元素的大小不会受到影响。

  -ms-flex: [grow shrink size];

  或者，shorhand版本：

  -ms-flex: [value]; // == -ms-flex: value value 0

  请注意，除非明确定义，否则IE10会提供默认的首选大小0，这可能会导致您的元素完全消失。这可以通过定义显式大小（px或%）或将其定义为auto）

来缓解

有关Flexbox的一般性讨论，您可以查看here，快速查找here