How to use flexbox correctly?

Question

safari

I studied flexes in some detail, wrote a couple of test projects and one "live" one using flexbox technology.
I have one PC with Ubuntu and that's it. No Mac, no iOS.
Question: how should I type on flex, what should I remember so that there are no problems with cross-browsing in safari and ios.
UPD: coha.look-website.xyz is my last project, in which jambs are observed only in the Safari browser, and also in Safari and Chrome under IOS, where the problem could not be identified.

Answer 1

I have one PC with Ubuntu and that's it. No Mac, no iOS.

If the power of the computer allows, then install VMware + Mac OS + Xcode
You are only using the -ms prefix and add the -webkit prefix.
Using the .main class as an example:
you have:

.main {
    max-width: 1170px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

and what should be:

.main {
    max-width: 1170px;
    margin: 0 auto;
     display: inline-block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-justify-content:space-between;
    justify-content: space-between;
    -ms-flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

Answer 2

Often the layout goes wrong because of the lack of flex-bazis - you can set it in the same values ​​(percentage is better, of course) and support it through width or max-width. But with max-width - everything is dark - often safari mobiles ignore this property as a fact.
Another hack - play around with flex: 1 0 initial; - here the most interesting thing is initial.