flex Css 在 Safari、iPhone 5 和移动浏览器 Webviews 中不支持

Posted 2023-03-07

【中文标题】flex Css 在 Safari、iPhone 5 和移动浏览器 Webviews 中不支持

【英文标题】：flex Css doesn't support in Safari , iPhone 5 and mobile Browser Webviews

【发布时间】：2016-06-02 11:26:26

【问题描述】：

这些是 html：

<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: -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: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;

flex Css 不支持 Safari、iPhone 5、ios 6 和移动浏览器 Webviews。我使用浏览器支持，但它仍然无法正常工作。请提供任何解决方案。我不想使用任何固定宽度。

【参考方案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;