CSS：在 webkit 上，全宽 flex 列不会相互堆叠

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>

CSS：在 webkit 上，全宽 flex 列不会相互堆叠

CSS: Full width flex column doesn't stack on top of each other on webkit

html

css

webkit

flexbox