flexbox：如何使框填充宽度，但不是当行没有完全填满时

Question

希望我的问题有道理。我正在尝试使用flexbox创建一个类似于bootstrap或foundation的网格系统。我希望每行填满屏幕的整个宽度，但只有该行完全填满。例如，如果我有五个盒子，每排有三个盒子，我希望第一行跨越整个宽度，而第二行只占宽度的2/3。所有的盒子都会保持相同的尺寸。目前我正在使用flex-grow：

HTML

<div id="portfoliobox">
  <div class="workbox"></div>
  <div class="workbox"></div>
  <div class="workbox"></div>
  <div class="workbox"></div>
  <div class="workbox"></div>
</div>

CSS

#portfoliobox{
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
}

.workbox{
width:380px;
height:200px;
background-color: rgba(255,255,255,0.5);
margin: 10px;
flex-grow: 1;

display:block;

}

这是我到目前为止所有这一切，当第4和第5个盒子移动到第二行时，它们都伸展到占据整个宽度。我希望它们保持与方框1到3相同的大小。但是，我希望这些所有行都可以拉伸其父容器的整个宽度。

希望我的问题很清楚。