CSS: full width column doesn't stack on top of each other in webkit

I have two divs in a container:

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

      

And I installed the container display:flex

and flex-direction

in column

.

I am trying to align 2 divs on top of each other . This works fine on Firefox but not WebKit (Chrome / Safari). In WebKit, columns are aligned next to each other.

Here is a jsFiddle for you to see.

My 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;
}

      

Why doesn't this work in WebKit?

+3


source to share


1 answer


To make it work in browsers (especially the Safari and iOS desktop) you need to prefix all associated properties. Visit here for browser support information. flex

Example 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>
      

Run codeHide result




Example 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>
      

Run codeHide result


+3


source







All Articles