Flexbox и safari

Question

Итак, у меня проблемы с сафари. Похоже, что и в ios, и на macs flexbox для меня не работает, хотя это и должно быть.

Когда я просматриваю его на ios, ящики отображаются в строке, хотя они должны отображаться как блок.

Когда я просматриваю его в сафари на своем рабочем столе (ПК), он отображается как блок, но он должен быть встроенным.

Он отлично работает в хромированном состоянии.

Вот HTML:

  <div class="flex-parent" style="margin:10px;margin-top: 30px;padding: 15px;border: 2px solid #EEEEEE;"> 
      <div style="width: 100%;"><h2><span style="font-weight: bold; color: rgba(1, 61, 121, 1); text-align:center;">Why?</span></h2></div> 
      <div class="flex-2"><ul class="front-page-list" style="list-style-type:none;margin-top:-20px;"> 
       <li> 
      <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">Because flexbox is new</span></h3> 
      </li> 
       <li> 
      <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">Apple likes to make everyone work around them</span></h3> 
      </li> 
       <li> 
      <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">There are too many versions of ios</span></h3> 
      </li> 
       <li> 
      <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">I'm not very good at this yet</span></h3> 
      </li> 
       <li> 
      <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">Etc.</span></h3> 
      </li> 
       <li> 
      <h3><span style="color:red;font-size: 30px;margin-right:15px;"><i class="fa fa-check"></i></span><span style="color: rgba(1, 61, 121, 1)">Etc.</span></h3> 
      </li> 
      </ul></div><div class="flex-2"> 
      <img src="http://domain.com/wp-content/uploads/2015/07/e1441825407759.jpg" height="100%" class="alignleft size-full wp-image-422" /> 
      </div></div> 

Вот CSS:

  .flex-parent{ 
       display: flex; 
       flex-wrap: wrap; 
       max-width: 1100px; 
       align-items: center; 
       justify-content: center; 
       align-content: stretch; 

      } 

      .flex-2{ 
       width:40%; 
       min-width: 400px; 
       flex-grow: 1; 
       margin:2%; 
       padding: 0; 
      } 

А вот то, что он превратился в, как я получил все более разочарованными и отчаянными:

  .flex-parent{ 
       display: -webkit-box; 
       display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction:row; 
       flex-direction: row; 
       -webkit-flex-wrap: wrap; 
       flex-wrap: wrap; 
       max-width: 1000px; 
       -webkit-align-items: center; 
       align-items: center; 
       -webkit-justify-content: center; 
       justify-content: center; 
       -webkit-align-content: stretch; 
       align-content: stretch; 

      } 


      @media screen and (max-width: 600){ 
      .flex-parent{ 
      display: block; 
      } 
      .flex-2{ 
      width: 100%; 
      display: block; 
      } 

      } 
      .flex-2{ 
       display: -webkit-box; 
       display: -webkit-flex-box; 
       -webkit-box-flex: 1; 
      -webkit-box-sizing: border-box; 
       width:40%; 
       min-width: 300px; 
       -webkit-flex: 1; 
       flex-grow: 1; 
       margin:1%; 
       padding: 0; 
      } 

Ничего из этого не работает ... если что-то я ухожу. Я не уверен, что делать, кроме как начать петицию на change.org, чтобы сделать устаревшие браузеры незаконными.

Answer 1

Просто используйте обработчик webkit для каждого из свойств гибкости. Не нужно ничего добавлять. См. Ручку и соответствующий код ниже. Работает для меня в Safari (макет идентичен таковому в Chrome). http://codepen.io/anon/pen/gaMzqr?editors=110

.flex-parent { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    max-width: 1100px; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-align-content: stretch; 
    align-content: stretch; 
} 

.flex-2 { 
    width: 40%; 
    min-width: 400px; 
    -webkit-flex-grow: 1; 
    flex-grow: 1; 
    margin: 2%; 
    padding: 0; 
}