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中检查控制台后，它会看到“显示：-ms-
flexbox;”。但没有其他“ -ms-”预先固定的东西？谁能澄清为什么会这样？

谢谢！:-)

Answer 1

是的，IE 10的flexbox简直就是一场噩梦。

以下是一些有关从多个站点抓取的IE 10 flexbox支持的提示（这一点非常有帮助）：

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

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

.lt-ie11 & { }

以下定义应放在 容器 元素中

• 定义一个Flex容器

display: -ms-flexbox;

。

• 水平对齐：

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

。

• 垂直对齐

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

以下定义应放在 子 元素（“项目”）中

• 元素排序

订单号可以是正数或负数。 数字越低，则容器越靠近容器开始位置

-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）