html - 如何在部分中包装盒子？

Question

A 有 a<section>和<article>s。当用户调整浏览器大小时，我想移动所有<article>元素并将宽度调整为 100%。我试着用flex-box. 这是我想要实现的目标

JSFiddle在这里

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

Answer 1

删除max-width您在它们上设置的。

更新了 jsFiddle - 我删除了 left/rightmargins。