Achieving a certain grid using flexbox

Question

I'm using flexbox to create a grid for my website. The grid is used for an articles archive, and should display 3 articles per row with margin between each article.

The problem is: I need the article boxes to start at the beginning of the row and end exactly at the end of the row. So the obvious thing was to use justify-content: space-between;, which I did. So this, in addition to flex-wrap: wrap created the grid I needed. Until I has a odd number of articles. Then the justify-content property left a blank space at the middle of the row, as you can see in the following example:

http://codepen.io/Naxon/pen/NbNXVj

It is very important to me, that no matter what the width of the container is, the items will start at the beginning and will end the the end.

How can I achieve this?

score 1 · Accepted Answer · answered Nov 13 '16 at 10:53

Flexbox doesn't support inter-item padding but we can fake it with calc() and margin. Codepen

.container {
  width: 800px;
  height: 800px;
  background-color: blue;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
}

.item {
  width: 150px;
  height: 150px;
  background-color: green;
  /* margins */
  margin-left: 10px;
  /* figure out width taking margins into account */
  flex-basis: calc((100% - 20px) / 3);
}
/* clear margin on every third item starting with the first */
.item:nth-child(3n+1) {
  margin-left: 0;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Achieving a certain grid using flexbox

1 Answers1