使用flex的CSS布局

所以我有一种在chrome和firefox中看起来不同的风格。。。 我想让这个大矩形区域在某种程度上成为页面的主区域，然后用flex将几个较小的div对齐成列

我的当前页面：

<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>

现在，当我在chrome中启动它时，它看起来很好，只是列之间的空间很大。我已经试过用填充和边距做一些奇怪的事情，但没有任何帮助。然后，当我在firefox中启动它时，列之间的空格是可以的，但每个div都在一个单独的列中：(

---

我做错了什么？

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

不再使用

它现在唯一的灵活性是..使用：

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;