플렉스가있는 CSS 레이아웃

Question

그래서이 스타일은 크롬과 파이어 폭스에서 다르게 보입니다. 페이지의 주요 영역에있는이 큰 직사각형 영역을 갖고 싶습니다. 그런 다음 몇 가지가 있습니다. 더 작은 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> 

현재 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; 
} 

. 나는 패딩과 마진을 가진 이상한 일을 이미 시도했지만 아무런 도움이되지 않는다. 나는 파이어 폭스를 시작할 때 다음, 기둥 사이의 공간을 확인하지만, 각 사업부가 별도의 컬럼에는 :( 내가 뭘 잘못?

Answer 1

파이어 폭스 나던 지원 플렉스 상자 밖으로.

에 대한 입력합니다. 파이어 폭스의 주소 필드에 설정이

True로 속성 다음이 작동합니다

세트를 layout.css.flexbox.enabled

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;