Flexbox, Flex Wrap и Safari

Question

Проще говоря, Safari действительно не поддерживает flexbox?

Недавно я собрал сайт в flexbox, я нахожу его чудесно отзывчивым, а затем вдруг что-то прочитал о Safari. Итак, я проверил его, и теперь ничего, что я обернул с помощью flex-wrap, не удалось в Safari.

Я также использую «Autoprefixer» через node.js, и он по-прежнему не работает.

Я просто хочу получить конкретный ответ, работает ли он или нет.

Спасибо.

Редактировать @cske, @Michael_B Спасибо за те ссылки, ребята, но я прошел через обе эти страницы и многое другое.

@Tyler; Да, я использую Autoprefixer so -webkit, и все остальные префиксы используются, но он по-прежнему не работает.

Однако, и я знаю, насколько сильно глупо это может показаться, но Safari для Windows совсем не то же самое, что Safari на OSX? (или какие-либо ОС Mac работают в эти дни)?

Это моя проблема. Я думаю. Кроме того, чтобы быть полным идиотом. Если бы моя голова была похожа на этот код слишком долго.

#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> 

Я надеюсь, что дает представление о том, мой код

EDIT я чувствую себя очень глупо, я думаю, что я слишком устал за все это лол, но я понятия не имел Safari для Windows, не было прекращено, по крайней мере, поддержка Apple была много лет назад, поэтому Safari, который я использую, устарел на несколько лет.

Должно быть, это так плохо отображается. Извините, что беспокоили вас всех. Спасибо.

Answer 1

Убедитесь, что вы добавили префикс -webkit-pre к свойству flex; требуемый Safari.

Если вы не имели в виду, что «ничего, что я обернул, используя flex-wrap, не удалось», на который на ваш вопрос можно просто ответить - да, это работает.

Механизм рендеринга - это то же самое между Windows/Mac для Safari. Если у вас есть какие-либо элементы формы, которые не стилизованы, по умолчанию это наследует внешний вид ОС.