html - CSS:全宽 Flex 列不会在 Webkit 上彼此堆叠

Question

我在一个容器中有两个 div，如下所示:

<div class="container">
    <div class="div-a"> Hello </div>
    <div class="div-b"> Lorem </div>
</div>

我已将容器设置为 display:flex 并将 flex-direction 设置为 column。

我的目标是将 2 个 div 彼此对齐。这在 Firefox 上运行良好，但在 WebKit (Chrome/Safari) 上运行不佳。在 WebKit 上，列改为彼此相邻对齐。

这是一个jsFiddle所以你可以看到。

我的 CSS 是:

.container {
    width:100%;
    float:left;
    flex-direction: column;
    display: -webkit-box;
    display: -moz-box; 
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex; 
}

.div-a {
    background:lightgreen;
    order:2;
    width:100%;
    float:left;
}

.div-b {
    background:lightblue;
    order:1;
    width:100%;
    float:left;
}

为什么这在 WebKit 上不起作用？

Answer 1

为了使 flex 能够跨浏览器(尤其是 Safari 桌面版和 iOS)工作，您需要为所有相关属性添加前缀。访问here了解浏览器支持详细信息。

flex-direction: column; 的示例

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.a {
    background: lightgreen;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.b {
    background: lightblue;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
</div>

flex-direction: row; 示例

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.a, .b {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.a {
    background: lightgreen;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.b {
    background: lightblue;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
</div>