Flexbox 似乎在 IE 中不起作用答案

【问题标题】：Flexbox does not seem to work in IEFlexbox 似乎在 IE 中不起作用
【发布时间】：2015-05-26 15:52:15
【问题描述】：

对于一个网站，我使用了一些弹性框。这些框在所有浏览器中都能完美运行，IE 除外。我将在下面为您提供我正在执行的操作的简化版本：

<div class="row-fluid vertical-align text">
            <div class="col-xs-16 col-md-8 leftText">
                Some textblock, which has a 10 lines
            </div>
            <div class="col-xs-16 col-md-8 rightText">
                Some other textblock.

            </div>
</div>

CSS：

.vertical-align {
    display: flex;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    align-items: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    min-height: 100%;
}

在 IE 中不起作用.. 在 chrome 和 ff 甚至 Safari 中都像魅力一样工作.. 有人吗？

【问题讨论】：

哪个版本的IE？究竟什么不起作用？它应该如何工作？
我只在 IE 11 中尝试过。
我通常希望看到 -ms-flex:1 和 -ms-flex-pack: center;在 CSS 上的某处使用以在 -ms-flexbox 内垂直居中内容
谢谢！明天试试看！

标签： html css internet-explorer flexbox

【解决方案1】：

解决了这个问题，对于 IE，我必须在 .vertical-align 类上指定一个高度（以像素为单位）。其他浏览器不需要它。在那里以百分比指定高度就足够了。

【讨论】：

请注意，您需要将display: flex; 作为最后一条规则。不是第一个，就像你的例子一样。