Home › Forums › CSS › Flexbox Direction and order in Safari › Reply To: Flexbox Direction and order in Safari
May 6, 2014 at 3:46 pm
#169358
ElijahFowler
Participant
You missed vendor prefixes for .main-content
inside the media query. I cleaned up your CSS and added all the needed prefixes with Autoprefixer (keep in mind this goes with the last 2 browser version, browsers with over 1% of global usage, Firefox ESR, and Opera 12.1).
.page-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.main-content {
background: white;
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
width: 60%;
}
.main-nav {
background: #ccc;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
width: 20%;
}
.main-sidebar {
background: #ccc;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
width: 20%;
}
.main-content,
.main-sidebar,
.main-nav {
padding: 1em
}
body {
background: #79a693;
padding: 2em;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
h1,
h2 {
font: bold 2em sans-serif;
margin: 0 0 1em 0;
}
h2 {
font-size: 1.5em
}
p {
margin: 0 0 1em 0
}
@media screen and (max-width: 36em) {
.page-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.main-content {
background: yellow;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
width: 100%;
}
.main-sidebar {
width: 100%;
}
.main-nav {
width: 100%;
}
}