CSS Flex grid - Same width for last item

Question

Hey I am trying to create a responsive box layout for a gallery, which looks like this http://webdesignerwall.com/demo/responsive-column-grid/

The problem with the example is that the widths are hardcoded and media queries are necessary. I have way to many columns for that to be a feasible solution.

I can achieve the same result with Flex girds, however the last column is larger than the others as shown in this CodePen:

http://codepen.io/anon/pen/zClcx

HTML

<div class="flex-container same-width same-height">
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>why am I longer than my friends?</div>
  </div>
</div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    max-width: 950px;
    flex-wrap: wrap;
    justify-content: space-between;
    background: grey;

  & > * {
    min-width: 300px;
    background: green;
    max-width: 404px;
    flex: 1 1 auto;
  }
  .flex-item > div {
    background: red;
  }
}

Question: How can I make the last column the same size as the others?

Answer 1

Set the flex grow to 0.

fiddle: http://jsfiddle.net/RichAyotte/Ev5V7/

<div class='flex-container seven'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.flex-container div {
    font-size: 200%;
    padding: 2mm;
    margin: 10px 10px;
    flex: 0 1 20%;
    box-shadow: 3px 3px 2px 0px rgba(50, 50, 50, 0.5);
}

Answer 2

It's a common misconception, but Flexbox is not a grid system. Once the flex items are set to be flexible, they can only be sized relative to the other flex items on the same line, not with the flex items on any other line. There is no way to force them to line up without using a specific width (though this width can be a percentage).

Your min-width serves no purpose here since your flex items are flexible. Your flex-shrink value serves no purpose because your flex items are allowed to wrap. The max-width is the only thing preventing the items on the last line from filling the entire row. You would have to know the exact width of the items in the preceding row in order to set the correct max-width value.

Related:

• Flex-box: Align last row to grid
• Left aligned last row in centered grid of elements