Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox Direction and order in Safari Reply To: Flexbox Direction and order in Safari

#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%;
    }
}