有没有可能让flexbox在iPhone4/iOS4上工作,或者提供一个后备方案?

有没有可能让flexbox在iPhone4/iOS4上工作,或者提供一个后备方案?,ios,css,iphone,twitter-bootstrap,flexbox,Ios,Css,Iphone,Twitter Bootstrap,Flexbox,我一直在网上搜索,但一直都很简短,基本上我需要让我的flexbow网格行在iPhone4上工作,但我似乎无法做到这一点。由于iOS4上的safari版本不支持新的flexbox语法,因此我提供了新旧混合的版本,这是我在搜索中给出的解决方案。但是,这对我不起作用: .row-eq-height { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; displ

我一直在网上搜索,但一直都很简短,基本上我需要让我的flexbow网格行在iPhone4上工作,但我似乎无法做到这一点。由于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
类不是这里的问题。我只是为了清楚地说明我想要实现的目标而添加了它

我的解决方案中是否有错误,如果没有,我是否可以提供某种回退以使其正常工作


我正在通过检查iPhone4,所以据我所知,他们的服务中可能也有一个bug

Flexbox与但不兼容;请注意,无论如何,即使使用旧语法,iOS4也不支持换行。

您可以使用垂直对齐的内联块,同时保持响应性。重要提示:内联块中包含空格,因此请确保将其删除或注释掉

<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>

.垂直中间{
显示:内联块;
垂直对齐:中间对齐;
浮动:无;
}

长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本
长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本
长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本
长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本

一些按钮
是的,您当然可以,只要您不需要-
webkit box
不支持的
柔性包装。但是为了让flexbox工作,您必须给flex grow
一个1的值,或者至少指定一个flex
宽度。使用旧的
-webkit-box
模型flex-grow表示为:
-webkit-box-flex:1

一旦flex项(
.col-xs-12
)可以增长,您只需使用
文本对齐将按钮居中即可。
请参见您的示例

Flexbox提示:编写向后兼容的FlexCSS的一个好方法是在启用“生成旧Flexbox样式”复选框的情况下使用这个有用的Flexbox。这将自动生成完整的CSS代码,其等效代码将应用于旧的“box flex”2009规范


您还可以使用它来查看和测试旧flexbox模型支持什么。任何较新版本的Safari、Chrome和Firefox,甚至Edge都应该按预期使用。

@Paulie\u D居中不是问题,因为容器没有达到它的高度。我只是为了清楚起见才加上它。