包裝盒在部分

A有一個<section>和<article> s。我想移動所有<article>元素，並在用戶調整瀏覽器大小時將其寬度調整爲100％。我試着用flex-box來做。以下是我想要實現 img http://up.programosy.pl/foto/boxes.jpg 包裝盒在部分

section, article { 
display: box; 
} 

article { 
    background: red; 
    margin: 10px; 
    display:-moz-box; /* Firefox */ 
    display:-webkit-box; /* Safari and Chrome */ 
    display:-ms-flexbox; /* Internet Explorer 10 */ 
    display:box; 
    max-width: 300px; 
    min-width: 50px; 
    padding: 20px; 
    width: 100%; 
    overflow: hidden; 
} 

section { 
    display: -moz-box-flex; 
    background: blue;  
}

來源

2013-10-15 Karol Białkowski

你有很多事情在這裏出錯。 'display：box'來自舊2009年的Flexbox草案，該草案正在出臺（請參閱：http://stackoverflow.com/questions/15662578/flexible-box-model-display-flex-box-flexbox）。在任何瀏覽器中，2009年沒有任何Flexbox實現支持包裝，Firefox目前也不支持使用其現代化實現進行包裝（請參閱：http://stackoverflow.com/questions/16773928/flexbox-and-wrap-property）。 Box-flex不是顯示屬性。你的第二個圖只能用*列*方向來實現，這需要使用固定的高度。 – cimmanon

取出max-width你對他們的設置。

Updated jsFiddle - 我刪除了左/右margins。

來源

2013-10-15 19:21:09

包裝盒在部分

回答

相關問題