OStack程序员社区-中国程序员成长平台

标题: ios - Safari、iPhone 5 和移动浏览器 Webviews 不支持 flex Css [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 13:00
标题: ios - Safari、iPhone 5 和移动浏览器 Webviews 不支持 flex Css

那些是 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。我使用浏览器支持，但它仍然无法正常工作。请提供任何解决方案。我不想使用任何固定宽度。

---

Best Answer-推荐答案

.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;
}

关于ios - Safari、iPhone 5 和移动浏览器 Webviews 不支持 flex Css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35529878/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4