火狐V.37嵌套平方flexboxes

我嵌套在主要佈局flexboxes一些平方flexboxes做了Flexbox的佈局。它在Chrome和IE中運行良好，但Firefox v37.02不會讓它們平方或根本不顯示它們。火狐V.37嵌套平方flexboxes

我想容器本身是主要佈局的flexboxes，這樣我就可以與媒體查詢重新排列，並有內容flexboxes在可用空間包裹。

這裏是一個小提琴例如https://jsfiddle.net/SanMoll/jj591x8f/

<div class="main"> 
    <div class="article"> 
     <div class="itemXL"></div> 
     <div class="itemXL"></div> 
    </div> 
    <div class="aside"> 
     <div class="itemL"></div> 
     <div class="itemL"></div> 
     <div class="itemL"></div> 
     <div class="itemL"></div> 
    </div> 
</div> 
<style> 
    .main { 
     display:flex; 
     width:100%; 
     height:100%; 
     background-color:#000; 
    } 
    .article { 
     /* display: flex;*/ 
     flex-wrap: wrap; 
     flex-direction: column; 
     width: 50%; 
     flex: 1; 
    } 
    .itemXL { 
     background-color: #f4f4f4; 
     width: 97%; 
     height:0; 
     margin-right: 3%; 
     margin-bottom: 3%; 
     padding-bottom: 97%; 
    } 
    .aside { 
     /*display: flex;*/ 
     flex-wrap: wrap; 
     flex-direction: row; 
     width: 50%; 
    } 
    .itemL { 
     background-color: #f4f4f4; 
     width: 47%; 
     height:0%; 
     margin-right: 3%; 
     margin-bottom: 3%; 
     padding-bottom:47%; 
    } 
</style>

任何幫助深表感謝。提前致謝！

來源

2015-05-11 Santana

僅供參考，關於css flex佈局的問題應該標記爲'flexbox'; 'flex'標籤是指Apache Flex。 – Brian

謝謝，我修好了！ – Santana

嗨，喬治，感謝編輯！不知道你是如何做得那麼快，我使用空間來完成一段時間需要安靜的代碼行，無論如何咚咚！你有沒有機會檢查代碼？問候 – Santana

您可以使用Flex-基礎很喜歡的元素的widht但flexboxes。

例如柔性基礎：50％;

並在媒體的查詢：FLEX-基礎：100％; （如果柔性包裝是包裝容器將推動別人走過）

你也應該用數字無法啓動變量名，你可以把一個「_'infront那麼細

如果你有問題瀏覽器的支持只是添加這一點，以確保它在每個瀏覽器中都能正常工作

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

來源

2016-12-27 13:53:35 zandalohd

火狐V.37嵌套平方flexboxes

回答

相關問題