align-items, align-self 不适用于 IE11 [英] align-items, align-self not working on IE11

问题描述

我这里有一个

但不是在 IE11 中:

我已经检查过 IE 未处于兼容模式 - 不是 - 它处于 IE11 模式.

这是怎么回事?

解决方案

这是 IE11 中的一个错误.

弹性容器上的 min-height 属性无法被 IE11 中的弹性项目识别.

如果您切换到 height: 4em，您会看到您的布局有效.

一个简单的解决方法是使 .container 成为一个弹性项目.

换句话说，将其添加到您的代码中:

body {显示:弹性；}.容器 {宽度:100%；/* 或 flex: 1 */}

无论出于何种原因，通过使您的 flex 容器也是一个 flex 项，子元素遵守 min-height 规则.

更多详情:Flexbugs:min-height弹性容器不适用于它的弹性项目

I have a simple plunker here.

.container {
  display:flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  min-height: 4em;
}

.nav {      
  flex: 0 0 4em;
  height: 1em;
}

.logo {
  flex: 1 0 auto; 
  align-self: stretch;
}

This is working how I want it to in Chrome 49:

But not in IE11:

I have checked that IE isn't in compatability mode - it's not - it's in IE11 mode.

What's going on here?

解决方案

This is a bug in IE11.

The min-height property on a flex container isn't recognized by flex items in IE11.

If you switch to height: 4em, you'll see that your layout works.

A simple workaround is to make .container a flex item.

In other words, add this to your code:

body {
    display: flex;
}

.container {
    width: 100%; /* or flex: 1 */
}

For whatever reason, by making your flex container also a flex item, the min-height rule is respected by the child elements.

More details here: Flexbugs: min-height on a flex container won't apply to its flex items

这篇关于align-items, align-self 不适用于 IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！