CSS3 - Flex包裝不工作IOS 10.1.1 Safari和Chrome

Question

我想使用柔性包裝和最小寬度：50％到動態網格佈局，其中單個單元佔據所有寬度。問題在於它在iOS 10.1.1（iPhone 5c）Safari和Chrome中無法正常工作 - 顯示屏不是網格狀，而是水平佈局。在桌面版Chrome（Ubuntu）和Android Chrome中工作正常。

的jsfiddle演示：https://jsfiddle.net/9dscc1Lq/

代碼：

<style> 

body { 
    width: 300px; 
} 

.tabs { 
    width: 100%; 
    display: flex; 
    display: -webkit-flex; 
    flex-wrap: wrap; 
    -webkit-flex-wrap: wrap; 
    flex: 0 0 auto; 
    -webkit-flex: 0 0 auto; 
    box-sizing: border-box; 
    flex-flow: row wrap; 
    -webkit-flex-flow: row wrap; 
} 

.tab { 
    border: 1px solid #3A3A3A; 
    color: #929292; 
    min-width: 50%; 
    box-sizing: border-box; 
    flex: 1 1 0; 
    -webkit-flex: 1 1 0; 
    text-align: center; 
} 

</style> 

<div class="tabs"> 
    <div class="gwt-HTML tab">1</div> 
    <div class="gwt-HTML tab">2</div> 
    <div class="gwt-HTML tab">3</div> 
    <div class="gwt-HTML tab">4</div> 
    <div class="gwt-HTML tab">5</div> 
</div> 

預計的佈局（正確）：

的iOS行爲（不正確）：

請指教！

Answer 1

min-width不工作按預期在iOS上，使用flex-basis這樣flex: 1 1 50%;

源：https://bugs.webkit.org/show_bug.cgi?id=136041

此外，使用前綴屬性時，你應該總是把他們的前綴的版本之前。

.tabs { 
 
    width: 100%; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    box-sizing: border-box; 
 
} 
 
.tab { 
 
    border: 1px solid #3A3A3A; 
 
    color: #929292; 
 
    box-sizing: border-box; 
 
    -webkit-flex: 1 1 50%; 
 
    flex: 1 1 50%; 
 
    text-align: center; 
 
}

<div class="tabs"> 
 
    <div class="gwt-HTML tab">1</div> 
 
    <div class="gwt-HTML tab">2</div> 
 
    <div class="gwt-HTML tab">3</div> 
 
    <div class="gwt-HTML tab">4</div> 
 
    <div class="gwt-HTML tab">5</div> 
 
</div>