如何在flex展示的容器中获取多行

Question

<div id='panelB'>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
</div>

#panelB{
    display:flex;
    justify-content:space-between;

}
.card{
    width:32%;
}

因为card的宽度是32％，所以我希望连续三个元素，第四个元素在一个新行中。

我看到的是同一行中的所有四个card元素，每个元素的宽度小于32％。

如何在flex展示的容器中获取多行来保持子项的声明宽度？

Answer 1

您还需要两个额外的css声明：flex-wrap和flex-basis。 Flex-basis取代了宽度。

#panelB {
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card {
    flex-basis:32%;
}

请参阅演示：http://codepen.io/anon/pen/GHfal