Flexbox 在 Android 4.4.2 的 android web 浏览器中无法运行答案

【问题标题】：Flexbox isn't working in android web browser in Android 4.4.2Flexbox 在 Android 4.4.2 的 android web 浏览器中无法运行
【发布时间】：2015-08-21 23:18:05
【问题描述】：

我一直在为我的一个客户开发这个网站，我一直在研究移动布局。我决定为整个网站使用 flexbox 布局，但出于某种奇怪的原因，4.4.2 的股票 android web 浏览器没有加载我使用 flexbox 的任何元素。 Chrome for Android 可以很好地使用 flexbox 加载我的所有元素。我不太确定发生了什么，但可以提供的任何帮助都会很棒。如果您使用开发人员工具，我所有的代码都在“hoopactivation.x10.mx”上。如果需要，我也可以在此处发布我的代码（这可能无论如何都会发生。我现在不在我的笔记本电脑附近）。

【问题讨论】：

Android 4.4.2 的问题你解决了吗？

标签： android html css android-4.4-kitkat flexbox

【解决方案1】：

在某些 Android 上，flexbox 不适用于内联元素，看起来流动元素已经消失了。

要解决这个问题，您必须将流动项目强制为display:block。我已经尝试过了，它有效，您可以在此处查看详细信息。

http://browser.colla.me/show/flexbox_make_element_collapse_height_0

【讨论】：

【解决方案2】：

我没有任何具体的代码要发布，但我自己在 flexbox 方面遇到了一些有趣的问题。我发现http://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/ 的博文非常有用，它解释了您需要做什么来支持其他浏览器。我一直在使用 flexbox 的“现代”标准，直到我发现它不适用于 Android，并找到了那篇博文，所以希望它会有所帮助。作为记录，这是我的粘性页脚CSS：

 /*
 Sticky Footer - Flexbox
 */

.flexboxtweener, .flexboxtweener>body {
    height: 100%; /* IE 10 */
}

.flexbox {
    body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
        -webkit-flex: 1 0 auto;
    }
}

/*
 Sticky Footer - w/ JS, no flexbox
 */

html.js.no-flexbox {
    position: relative;
    min-height: 100%;

    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}

/*
 Sticky Footer - no JS, no flexbox
 */

// x-small
html.no-js {
    main {
        margin-bottom: 508px;
    }
    footer {
        height: 508px;
    }
}

@media (min-width: @screen-md-min) {
    .no-js main {
        margin-bottom: 210px;
    }

    .no-js footer {
        height: 210px;
    }
}

这是在 LESS 中并使用了一些 Bootstrap mixin，但希望这会有所帮助！

【讨论】：