Opera Mini flex 不换行答案

【问题标题】：Opera Mini flex not wrappingOpera Mini flex 不换行
【发布时间】：2018-09-22 14:56:40
【问题描述】：

在 Android 4.1 上，Opera Mini 33 不支持 css flex 布局。它确实使用旧的 2009 flex 标准（显示：-webkit-box）box-lines: multiple;

我不能断线，没有任何效果：

box-lines: multiple;
-webkit-box-lines: multiple;
flex-wrap: wrap;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;

在其他 Android (7) 上，它尊重新的 flex 语法，带有 flex-wrap: wrap; Caniuse.com 显示 Opera Mini 支持 flex，但显然不支持。

有人遇到过这个问题吗？在数据保存模式之间切换似乎是一种选择，flex 在“Extreme”模式下理想地工作，但在所有其他 3 种模式下却不行。我已经重新安装了 Opera，甚至清除了系统 - 没有任何变化。

如何在 Android 4.1 上打破 Opera Mini 中的 flex 行？这是我的实际代码：

<div class="test">
    <div></div>
    <div></div>
    <div></div>
</div>

.test {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 300px;
    margin: 100px auto;
    width: 600px; 
    -webkit-flex-flow: row;
    -webkit-flex-flow: wrap;
}

.test > div {
    width: 100px;
    flex-grow: 1;
    background: pink;
    height: 200px;
}
.test > div:nth-child(2) {
    background: yellow;
}
.test > div:last-of-type {
    background: blue;
    width: 100%;
}

【问题讨论】：

标签： android html css flexbox opera-mini

【解决方案1】：

似乎没有人知道答案，所以我分享我的解决方案。如果浏览器支持 flex-wrap，部分解决方案可能是由 JS 检测，然后将一个类添加到 body 并为此创建单独的样式。

这是进行检测的唯一方法，因为 Opera Mini 在其用户代理中仅在“极端”模式数据保存时包含“Opera Mini”，任何其他情况 Opera Mini 都显示为 Opera Mobile（但实际上 Opera Mobile 与最新的 flex)。

这个简单的代码足以检测 flex-wrap 支持：

var d = document.documentElement.style
if (!('flexWrap' in d) && !('WebkitFlexWrap' in d) && !('msFlexWrap' in d)){
    document.getElementsByTagName('body')[0].className+=' not-full-flex-support'
}

取自这个答案：https://stackoverflow.com/a/27047981/2796533

【讨论】：