Flexbox和safari

Question

所以我遇到了safari問題。看起來好像在ios和Mac電腦上，flexbox不適合我，即使它應該。

當我在ios上查看它時，這些框顯示爲內聯，儘管它們應該顯示爲塊。

當我在桌面（PC）的safari中查看它時，它顯示爲塊，但它應該是內聯的。

它在鍍鉻中完美運作。

這裏的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

只爲每個flex屬性使用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; 
}