Flexbox項目不會在Safari 10（桌面）中並排放置

Question

小提琴是here。

<profile-summary>元件被認爲是相鄰的

工程在鉻，FF，IE11 +。但Safari 10不會這樣做。

我該如何解決這個問題？

Answer 1

似乎是因爲profile-summary { flex-basis: 100%; ... }，它將元素的初始大小設置爲100%寬度。這似乎與您的max-width聲明一起工作，通過直觀限制寬度，但仍然將flex項目放在safari中，而不是在其他瀏覽器中。

更好的方法是刪除flex-basis並設置flex-grow: 1。這似乎適用於max-width，並將safari/chrome/ff中的flex項保留在同一行上。

search-profiles-page { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-basis: auto; 
 
    flex-grow: 1; 
 
} 
 

 
search-profiles-page .xui-profile-search-results { 
 
    margin-left: 0; 
 
    flex: .75; 
 
    flex-grow: 1; 
 
} 
 

 
search-profiles-page .xui-profile-search-results { 
 
    margin-left: 0; 
 
    flex: .75; 
 
    flex-grow: 1; 
 
} 
 

 
search-profiles-page .xui-profile-search-results { 
 
    margin: 0 -15px; 
 
    display: block; 
 
    background: #f7fafa; 
 
} 
 

 
profile-summaries { 
 
    display: block; 
 
} 
 

 
search-profiles-page .xui-profile-search-results profile-summaries .list { 
 
    padding: 15px; 
 
} 
 

 
profile-summaries .profiles-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
search-profiles-page .xui-profile-search-results profile-summaries .list profile-summary { 
 
    margin-top: 30px; 
 
    max-width: calc(30% - 15px); 
 
} 
 

 
profile-summary { 
 
    /*flex-basis: 100%;*/ 
 
    flex-grow: 1; 
 
    padding: 15px; 
 
    border: 1px solid #ccc; 
 
    margin-top: 15px; 
 
    list-style-type: none; 
 
    display: block; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
}

<search-profiles-page> 
 
    <div class="xui-profile-search-results"> 
 
    <profile-summaries> 
 
     <div class="list"> 
 
     <profile-modals> 
 
      <div class="profiles-container"> 
 
      <profile-summary> 
 
       <div class="profile-header"> 
 
       blahblah 
 
       </div> 
 
       <div class="body"> 
 
       blahblah 
 
       </div> 
 
      </profile-summary> 
 
      <profile-summary> 
 
       <div class="profile-header"> 
 
       blahblah 
 
       </div> 
 
       <div class="body"> 
 
       blahblah 
 
       </div> 
 
      </profile-summary> 
 
      </div> 
 
     </profile-modals> 
 
     </div> 
 
    </profile-summaries> 
 
    </div> 
 
</search-profiles-page>

你也可以只使用width: 100%，而不是flex-grow: 1然後它會以同樣的方式，但我認爲這是最好使用彎曲特性，如果你能和flex-grow似乎工作就好了。

search-profiles-page { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-basis: auto; 
 
    flex-grow: 1; 
 
} 
 
search-profiles-page .xui-profile-search-results { 
 
    margin-left: 0; 
 
    flex: .75; 
 
    flex-grow: 1; 
 
} 
 
search-profiles-page .xui-profile-search-results { 
 
    margin-left: 0; 
 
    flex: .75; 
 
    flex-grow: 1; 
 
} 
 
search-profiles-page .xui-profile-search-results { 
 
    margin: 0 -15px; 
 
    display: block; 
 
background: #f7fafa; 
 
} 
 
profile-summaries { 
 
    display: block; 
 
} 
 
search-profiles-page .xui-profile-search-results profile-summaries .list { 
 
    padding: 15px; 
 
} 
 
profile-summaries .profiles-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
search-profiles-page .xui-profile-search-results profile-summaries .list profile-summary { 
 
    margin-top: 30px; 
 
    max-width: calc(30% - 15px); 
 
} 
 
profile-summary { 
 
    /*flex-basis: 100%;*/ 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 1px solid #ccc; 
 
    margin-top: 15px; 
 
    list-style-type: none; 
 
    display: block; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
}

<search-profiles-page> 
 
    <div class="xui-profile-search-results"> 
 
     <profile-summaries> 
 
      <div class="list"> 
 
      <profile-modals> 
 
       <div class="profiles-container"> 
 
        <profile-summary> 
 
         <div class="profile-header"> 
 
         blahblah 
 
         </div> 
 
         <div class="body"> 
 
         blahblah 
 
         </div> 
 
        </profile-summary> 
 
        <profile-summary> 
 
         <div class="profile-header"> 
 
         blahblah 
 
         </div> 
 
         <div class="body"> 
 
         blahblah 
 
         </div> 
 
        </profile-summary> 
 
       </div> 
 
      </profile-modals> 
 
      </div> 
 
     </profile-summaries> 
 
    </div> 
 
    </search-profiles-page>

Answer 2

只需添加flex: 1;您profile-summary，它應該很好地工作在所有瀏覽器。

作爲每W3 article，

撓曲：正數

等效撓曲：正數 1 0使柔性項 靈活並且設置柔性基礎零，導致 收到flex 容器中的空閒空間的指定比例的項目。如果柔性容器中的所有項目均使用此模式，則其大小將與指定的彈性係數成比例。

換句話說，撓曲：1種手段，

flex-grow : 1; // this means that the div will grow in same proportion as the window-size 
flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size 
flex-basis : 0; // this means that the div does not have a starting value as such and will take up screen as per the screen size available for.e.g:- if 3 divs are in the wrapper then each div will take 33%. 

參考代碼：

search-profiles-page { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-basis: auto; 
 
    flex-grow: 1; 
 
} 
 

 
search-profiles-page .xui-profile-search-results { 
 
    margin-left: 0; 
 
    flex: .75; 
 
    flex-grow: 1; 
 
} 
 

 
search-profiles-page .xui-profile-search-results { 
 
    margin-left: 0; 
 
    flex: .75; 
 
    flex-grow: 1; 
 
} 
 

 
search-profiles-page .xui-profile-search-results { 
 
    margin: 0 -15px; 
 
    display: block; 
 
    background: #f7fafa; 
 
} 
 

 
profile-summaries { 
 
    display: block; 
 
} 
 

 
search-profiles-page .xui-profile-search-results profile-summaries .list { 
 
    padding: 15px; 
 
} 
 

 
profile-summaries .profiles-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
search-profiles-page .xui-profile-search-results profile-summaries .list profile-summary { 
 
    margin-top: 30px; 
 
    max-width: calc(30% - 15px); 
 
} 
 

 
profile-summary { 
 
    padding: 15px; 
 
    border: 1px solid #ccc; 
 
    margin-top: 15px; 
 
    list-style-type: none; 
 
    display: block; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
    flex: 1; 
 
}

<search-profiles-page> 
 
    <div class="xui-profile-search-results"> 
 
    <profile-summaries> 
 
     <div class="list"> 
 
     <profile-modals> 
 
      <div class="profiles-container"> 
 
      <profile-summary> 
 
       <div class="profile-header"> 
 
       blahblah 
 
       </div> 
 
       <div class="body"> 
 
       blahblah 
 
       </div> 
 
      </profile-summary> 
 
      <profile-summary> 
 
       <div class="profile-header"> 
 
       blahblah 
 
       </div> 
 
       <div class="body"> 
 
       blahblah 
 
       </div> 
 
      </profile-summary> 
 
      </div> 
 
     </profile-modals> 
 
     </div> 
 
    </profile-summaries> 
 
    </div> 
 
</search-profiles-page>