问题描述:

Hi hopefully my question makes sense. I am trying to use flexbox to create a grid system similar to bootstrap or foundation's. I want each row to fill up the entire width of the screen, but only of that row is completely full. For example, if I have five boxes, with three boxes fitting on each row, I want the first row to span the entire width while the second row only takes up 2/3 of the width. all the boxes would maintain the same size. currently I am using 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;

}

This is all I have so far, and when the 4th and 5th boxes are moved to the second row, they both stretch out to take up the entire width. I want them to maintain the same size as boxes 1 to 3. However, I want these all the rows to stretch the entire width of its parent container.

hopefully my question is clear enough.

相关阅读:
Top