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?
source to share
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>
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>
source to share