对 Android WebView 和 iOS UIWebView 的 CSS Flex 支持答案

【问题标题】：CSS Flex support for Android WebView and iOS UIWebView对 Android WebView 和 iOS UIWebView 的 CSS Flex 支持
【发布时间】：2016-02-21 09:12:17
【问题描述】：

基于我的previous question here。我正在尝试使用 CSS Flex 功能来证明多行工具栏按钮以填充整个行的宽度，它适用于大多数浏览器，除了 android WebView 和 iOS UIWevView 我在我的移动应用程序中使用它们。

这是我正在使用的当前代码。

<div class="btn-toolbar text-center" role="toolbar">
  <a href="#" class="btn btn-success">Link 1</a>
  <a href="#" class="btn btn-success">Link 11</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 1111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 111111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 1111</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 11</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 1111111</a>
  <a href="#" class="btn btn-success">Link 111111111</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 11</a>
  <a href="#" class="btn btn-success">Link 11111111111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 1</a>
</div>

这是我正在使用的 CSS：

.btn-toolbar{
    display: flex;
    flex-wrap: wrap;
}
.btn-toolbar .btn{
    flex: 1;
}

那么在 Android 和 iOS Web 视图上是否有任何解决方法。

【问题讨论】：

查看caniuse 以了解浏览器对 flexbox 模型的支持。如果浏览器不支持，你可以使用 polyfill，比如Flexie

标签： android ios css uiwebview flexbox

【解决方案1】：

我花钱请人解决了，这里是所有浏览器和操作系统的解决方案。

.btn-toolbar{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
} 
.btn-toolbar .btn{
    -webkit-box-flex-grow: 1;
    -moz-box-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
}

【讨论】：