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：全宽度flex列在webkit上不会叠加在一起

1 个答案: