是否可以让 flexbox 在 iphone 4/iOS 4 上工作或提供回调？答案

【问题标题】：Is it possible to make flexbox work on iphone 4/iOS4 or provide a fallback?是否可以让 flexbox 在 iphone 4/iOS 4 上工作或提供回调？
【发布时间】：2015-10-20 06:20:16
【问题描述】：

我一直在网上搜索，但一直没能成功，基本上我需要让我的 flexbow 网格行在 iphone 4 上工作，但我似乎无法这样做。由于 iOS4 上的 safari 版本不支持新的 flexbox 语法，因此我提供了新旧混合语法，这是我搜索的解决方案。但是这对我不起作用：

.row-eq-height {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

我有一个标题，其中包含一些我需要能够居中的元素，我可以在使用 flexbox 时：

<div class="row row-eq-height">
  <div class="col-xs-12">
    <button class="center-y">Some button</button>
  </div>
</div>

请注意，center-y 类不是这里的问题。我只是为了清楚我想要实现的目标而添加它。

我的解决方案有问题吗？如果没有，我可以提供某种回退以使其正常工作吗？

我正在通过browserstack 检查 iphone 4，因此据我所知，他们的服务中也可能存在错误。

【问题讨论】：

@Paulie_D 居中不是问题，这是因为容器没有达到它的高度。为了清楚起见，我只是添加了它。

标签： ios css iphone twitter-bootstrap flexbox

【解决方案1】：

Flexbox 与all versions of iOS 兼容，但与older you must use old -webkit syntax 兼容；请注意无论如何 iOS4 不支持 Wrapping 即使是旧语法。

【讨论】：

【解决方案2】：

您可以在保持响应能力的同时使用垂直对齐的内联块。重要提示：内联块包含空格，因此请务必将其删除或注释掉。

<style>
    .vertical-middle {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
</style>

<div class="row">
    <div class="col-xs-12 col-sm-6 vertical-middle">
        <p>
            long text long text long text long text long text long text long text long text long text long text long text 
            long text long text long text long text long text long text long text long text long text long text long text 
            long text long text long text long text long text long text long text long text long text long text long text 
            long text long text long text long text long text long text long text long text long text long text long text 
        </p>
    </div><!--
    --><div class="col-xs-12 col-sm-6 vertical-middle">
        <button>Some button</button>
    </div>
</div>

【讨论】：

【解决方案3】：

是的，您绝对可以，只要您不需要 flex-wrap，而 -webkit-box 不支持。但是为了让 flexbox 工作，你必须给一个 1 的 flex-grow，或者至少指定一个 flex width。用旧的-webkit-box模型flex-grow表示为：-webkit-box-flex: 1;

一旦 flex-item (.col-xs-12) 可以增长，您只需使用 text-align 将按钮居中即可。有关您的示例，请参见 this fiddle。

Flexbox 提示：编写向后兼容的 flex CSS 的一个好方法是使用这个有用的 flexbox code generator 并启用“生成旧版 flexbox 样式”复选框。这将自动生成完整的 CSS 代码，等效于旧的“box-flex”2009 规范。

您也可以使用flexiejs playground 查看和测试旧的 flexbox 模型支持什么。任何较新版本的 Safari、Chrome 和 Firefox 甚至 Edge 都应该可以正常使用。

【讨论】：