Flexbox, Flex Wrap and Safari

Question

Simply put, does Safari really not support flexbox?

I've recently put together a site in flexbox, I find it wonderfully responsive, then suddenly I read something about Safari. So, I checked it and now nothing that I've wrapped using flex-wrap have failed in Safari.

I'm also using "Autoprefixer" through node.js and it still doesn't work.

I just want a definite answer to whether it works or not.

Thanks.

edit @cske, @Michael_B Thanks for those links guys, but I've been through both of those pages and more.

@Tyler; Yes I use Autoprefixer so -webkit and all the other prefixes are being used but it still doesn't work.

However, and I know how intensely stupid this realisation may seem, but Safari for Windows is not at all the same as Safari on OSX? (or whatever OS Macs run these days) is it?

That is my problem. I think. Apart from being a complete idiot. Had my head buried in this code for far too long.

#content {
    background: skyblue;
    max-width: 995px;
    margin: 0 auto;
    padding: 0 3%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width:995px;
}
.content-wrapper {
    background: turquoise;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width:25%;
    padding-top:1.0em;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}
.div-inset {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; 
    margin: 0 3.676470588235294% 0 3.676470588235294%;
    display: block;
}
.product-image {
    border: 0.1em solid #CCCCCC;
    padding: 5.514705882352941%;
    position: relative;
    overflow: hidden;
    display: block;
}

<section id="content">
    <div class="content-wrapper">
        <div class="div-inset">
            <div class="product-image"><img src="153.jpg"></div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="div-inset">
            <div class="product-image"><img src="153.jpg"></div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="div-inset">
            <div class="product-image"><img src="153.jpg"></div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="div-inset">
            <div class="product-image"><img src="153.jpg"></div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="div-inset">
            <div class="product-image"><img src="153.jpg"></div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="div-inset">
            <div class="product-image"><img src="153.jpg"></div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="div-inset">
            <div class="product-image"><img src="153.jpg"></div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="div-inset">
            <div class="product-image"><img src="153.jpg"></div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="div-inset">
            <div class="product-image"><img src="153.jpg"></div>
        </div>
    </div>
</section>

I hope that gives you an idea of my code

EDIT I feel really stupid, I guess i'm too tired for all this lol, but I had no idea Safari for Windows was discontinued, at least it's Apple support was many years ago, so the Safari I am using is several years out of date.

That must be why it's displaying so poorly. Sorry to have bothered you all. Thank you.

Answer 1

Make sure that you include the -webkit- prefix to your flex property; required by Safari.

Unless you did mean that "nothing I've wrapped using flex-wrap have failed," which your question can simply be answered by- yes it works.

The rendering-engine is the same between Windows/Mac for Safari. If you have any form-elements that are not styled it's default is to inherit the OS's look/feel.