CSS-макет с flex

Question

Итак, у меня есть этот стиль, который выглядит по-другому в chrome и firefox ... Я хочу иметь эту большую область прямоугольника, которая была бы в некотором роде главной областью страницы, а затем было бы несколько меньшие divs выровнены в столбцы с 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; 
} 

сейчас, когда я начинаю его в хром, он выглядит довольно много хорошо, за исключением того, что промежутки между колоннами огромны. Я уже пробовал делать какие-то странные вещи с заполнением и полями, но ничего не помогает. Потом, когда я начинаю его в светлячок, промежутки между столбцами в порядке, но каждая из DIV находится в отдельной колонке :( Что я делаю неправильно?

Answer 1

Firefox поддержка оленьей кожи Flex из коробки.

введите о: конфигурации в адресной строке Firefox

layout.css.flexbox.enabled

установить это свойство Правда тогда он будет работать

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

..

-box и -flexbox больше не используются.

его только сейчас .. Flex Go с:

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