html - 自动边距扩展在 IE11 的 flexbox 内不起作用

Question

我在 IE11 的 flex 框中遇到 margin: auto 的问题。

这是我期望的组织。空的 child 没有内容，但 margin: auto 应该使它只占用整个剩余空间及其边距。

在 Chrome Firefox 或 Safari 上，我得到了我想要的结果 here .

但在 IE11 上，justify-content: flex-end 似乎没有任何效果，margin: auto 被简单地忽略了，空子没有边距完全没有。

我花了一整天的时间来解决这个问题，但我还没有找到任何解决方案……有什么想法吗？

编辑:这不是关于 centering 的问题，而是关于为什么 justify-content: flex-end 或 margin: auto 对布局没有任何影响。

Answer 1

这似乎是一个已知问题，您可以查看 this link .并且这个问题在 Edge 浏览器中得到了修复。

因此，作为解决方法，您可以尝试自己设置 margin-top 或 margin-bottom 属性。像这样:

<style type="text/css">
    .grandparent {
        min-height: 100vh;
        background: red;
    }

    .parent {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 100vh;
        width: 100%;
        max-width: 46rem;
        margin: 0 auto;
        padding: 1.5rem 1rem;
        background: blue;
    }

    .empty-child {
        margin-top: 20%;
        margin-bottom: 20%;
        max-width: 100%;
        width: 100%;
        height: 400px;
        background: yellow;
    }

    .child-1,
    .child-2 {
        display: flex;
        width: 100%;
        height: 60px;
        margin-top: 1.25rem;
        margin-bottom:1.25rem;
        background: purple;
    }
</style>