CSS：全宽度flex列不会在webkit上彼此堆叠 [英] CSS: Full width flex column doesn't stack on top of each other on webkit

问题描述

我在这样的容器中有两个div：

I have two divs in a container like this:

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

我已将容器设置为 display：flex 和 flex-direction 到列。

And I have set the container to display:flex and flex-direction to column.

我的目标是将2个div 对齐。这在Firefox上正常工作，但不是在WebKit（Chrome / Safari）。

I aim to align the 2 divs on top of each other. This works fine on Firefox but not on WebKit (Chrome/Safari). On WebKit, the columns align next to each other instead.

这里是一个 jsFiddle ，以便您可以看到。

Here is a jsFiddle so you can see.

我的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上不起作用？

Why is this not working on WebKit?

推荐答案

为了获得 flex 和iOS），您需要前缀所有相关的属性。有关浏览器支持详情，请访问 此处 。

In order to get flex to work across browsers (especially Safari desktop and iOS ), you need to prefix all the related properties. Visit here for browser support details.

flex-direction：column示例

Example of 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; 示例

Example of 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上彼此堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！