css - 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 支持的提示，从几个网站(this 一个非常有帮助):

---

首先 - 一个非常有用的标志(可以放在所有元素上):

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

  .lt-ie11 & { }

---

下面的定义应该放在container元素中

• 定义一个 Flex 容器

  显示:-ms-flexbox;

.

• 水平对齐方式:

  -ms-flex-pack: 开始/结束/居中/对齐；

.

• 垂直对齐

  -ms-flex-align: 开始/结束/中心/拉伸(stretch)/基线；

---

以下定义应放在子元素(“item”)中

• 元素排序

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

  -ms-flex-order [数字]

.

• 设置元素的扩大/缩小/首选尺寸

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

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

  -ms-flex: [增长收缩大小];

  或者，速记版本:

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

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

关于Flexbox的一般性讨论，可以看看here , 快速查找是 here