CSS3 - Flex wrap 在 IOS 10.1.1 Safari 和 Chrome 上不起作用

Question

我正在尝试将 flex wrap 和 min-width: 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>