对齐项目，对齐自我在 IE11 上不起作用

Posted 2023-03-05

【中文标题】对齐项目，对齐自我在 IE11 上不起作用

【英文标题】：align-items, align-self not working on IE11

【发布时间】：2017-04-08 02:28:45

【问题描述】：

我有一个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;

这是我希望在 Chrome 49 中的工作方式：

但不在 IE11 中：

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

这里发生了什么？

【参考方案1】：

这是 IE11 中的一个错误。

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

如果您切换到height: 4em，您会发现您的布局有效。

一个简单的解决方法是将.container 设为弹性项目。

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

body 
    display: flex;


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

无论出于何种原因，通过使您的弹性容器也成为弹性项目，min-height 规则受到子元素的尊重。

更多详情：Flexbugs: min-height on a flex container won't apply to its flex items