-webkit-flex 在 Android 上无法正确显示答案

【问题标题】：-webkit-flex not displaying properly on Android-webkit-flex 在 Android 上无法正确显示
【发布时间】：2013-05-11 19:51:42
【问题描述】：

在意识到display:flex 的奇妙功能后，我制作了一个网页，当在 Windows 上的 Chrome 26 中查看时，它看起来完全符合我的要求。但是，它在我的 Android 上的 Chrome 26 中不起作用，在我的模拟器中的 Android 浏览器 4.1 中也不起作用。根据caniuse，所有这些浏览器都应该支持它。

也许巧合的是，它在 Android 中的外观（据我所知）与我切换到旧版本 display:box 时的外观相同。

这是 Windows 与 Android 中的情况：

我的问题是，如何防止这些跨设备问题？也许使用 flex 以外的东西直到它变得更加标准会更好。谁能给我一个不使用 flex 或在 Android 上工作的工作示例？这是一个移动网络应用程序。任何帮助深表感谢。我的代码链接如下。

使用-webkit-flex：JSFiddle

带框：JSFiddle

【问题讨论】：

您的意思是用 Adobe/Apache Flex 标记这个问题吗？
不，我没有使用 Adobe Flex

标签： html css webkit flexbox

【解决方案1】：

需要注意 3 个具有不同属性/值的 Flexbox 草稿。 Caniuse 仅区分支持当前草案的浏览器（“支持”）与支持旧草案（“部分支持”）的浏览器。

为了最大限度地支持浏览器，您只需将它们从最旧版本到最新版本都包括在内。

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.bar {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

虽然所有 Android 版本目前都支持旧的 2009 属性，但它们可能会在未来被弃用，以支持标准属性。另请注意，Blackberry 10 被列为支持当前标准，而不是任何旧草案。

【讨论】：

这并没有解决问题，它在 Android 4.1 上看起来仍然相同（损坏）
我替换了 display:-webkit-flex 的每个实例；它的所有变体，以及 -webkit-flex:1 的每个实例；也是。我将发布我的新 CSS。
jsfiddle.net/JTgWH 我的应用程序不会部署到除 Android 和 iOS 设备之外的任何设备，所以我假设 -moz 和 -ms 毫无意义。
我想重申，这在 Windows 上的 Chrome 26 中看起来非常好，但在 Android 上的 Chrome 26 中不起作用。我觉得这会发生很奇怪。
你见过order/box-ordinal-group属性吗？

【解决方案2】：

对于那些好奇的人，我最终完全重写了我的代码以不使用 flex。这是一个指向 JSFiddle 的链接，它对我的目的非常有用。 http://jsfiddle.net/8juSk/

它使用@cimmanon 建议的box 和box-ordinal-group。

【讨论】：