Question

对于一个项目，我需要创建一个由其他矩形（6）的螺旋组成的矩形，就像黄金比例矩形一样。

我使用flexbox来做这件事，因为我觉得这是最干净的方法。

当我在我的PC上测试它（firefox，chrome，IE，Safari）时，它在Firefox和IE上运行良好（我认为最好的是IE实际上是我正在尝试做的事情），但是在chrome（ v41），它不起作用。

在智能手机上，我尝试使用Firefox（它可以正常工作），但是当我尝试使用android的股票浏览器或者在Android上使用Chrome时，它在PC上具有与Chrome相同的渲染（模块相互重叠，第6个完全在页面的底部）。

这是源代码： HTML：

<div id="board-view" class="board-module-container bleft">
    <div class="board-module">
        Module 1
    </div>
    <div class="board-module-container bbottom">
        <div class="board-module">
            Module 2
        </div>
        <div class="board-module-container bright">
            <div class="board-module">
                Module 3
            </div>
            <div class="board-module-container btop">
                <div class="board-module">
                    Module 4
                </div>
                <div class="board-module-container bleft">
                    <div class="board-module">
                        Module 5
                    </div>
                    <div class="board-module-container bbottom">
                        <div class="board-module">
                            Module 6
                        </div>
                        <div class="board-module-container bright">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

    #board-view {
    height: 100%;
}

.board-module-container {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 3892;
    -webkit-flex: 3892;
    -ms-flex: 3892;
    flex: 3892;
}

.board-module-container.bleft {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.board-module-container.bright {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.board-module-container.btop {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.board-module-container.bbottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.board-module {
    -webkit-box-flex: 6108;
    -webkit-flex: 6108;
    -ms-flex: 6108;
    flex: 6108;
    border: solid 1px black;
    background-color: white;
}

我不知道为什么它不起作用。 Caniuse说它与智能手机浏览器兼容......

以下是实时版：http://infolimon.iutmontp.univ-montp2.fr/~philipb/ColorMyMood/

希望你能找出问题所在：）

Flexbox无法运行 - 智能手机浏览器

0 个答案: