0

所以我有这种在 chrome 和 firefox 中看起来不同的风格......我希望这个大矩形区域在某种程度上是页面的主要区域，然后会有几个较小的 div 对齐到带有 flex 的列中。

我的当前页面：

<div class="flexContainer">
    <div id="mainArea" class="mainArea">
        Main area
    </div>
    <div class="area ">
        asdf
    </div>
    <div class="area ">
        asdf
    </div>
    <div class="area">
        asdf
    </div>
    <div class="area">
        asdf
    </div>
    <div class="area">
        asdf
    </div>
</div>

和当前的CSS：

.area {
    background: #FFFFFF;
    /*border-radius: 15px;
    box-shadow: 0px 0px 20px 1px #303030;*/
    margin: 0px 0px 2px 2px;
    width:12em;
    min-height:12em;
    display:block;
}

.mainArea {
    display:block;
    width:700px;
    height:100%;
    background: #FFFFFF;
    padding:5px;
    /*box-shadow: 5px 0px 10px 1px #303030;*/
}

.flexContainer {
    height:100%;
    margin:0px;
    padding:0px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: baseline;
    -webkit-flex-flow: column wrap;
    flex-direction: column wrap;
}

现在，当我在 chrome 中启动它时，它看起来还不错，除了列之间的空间很大。我已经尝试用填充和边距做一些奇怪的事情，但没有任何帮助。然后，当我在 Firefox 中启动它时，列之间的空格还可以，但是每个 div 都在一个单独的列中:(我做错了什么？

4

1 回答 1

0

Firefox 不支持开箱即用的 Flex。

在 Firefox 地址字段中键入 about:config

layout.css.flexbox.enabled

将该属性设置为 True。那么它将起作用。

  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

-box 并且-flexbox 不再使用。

它现在唯一的 Flex .. 搭配：

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
于 2014-02-20T16:18:43.637 回答