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; 
}