Don't show wide gap between items when they don't fill the row

Question

Please check this fiddle where when you resize the window and when the cards are going down, the bottom part of the cards looks odd with more space between them. I want those bottom parts of the cards be align with the above cards.

I know this can be done easily with display: inline-block but I am trying to do this using flexbox i.e display: flex.

.parent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.child {
  min-width: 200px;
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 0px 1px black;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Changing `justify-content` to `justify-content: flex-start;` seems to do the trick. extra spacing can be added using `margin-bottom` and `margin-right`. — lennyklb, Apr 21 '17 at 14:01
@LennartKloppenburg then there would be odd gap on right side when resizing.. — Mr_Green, Apr 21 '17 at 14:03
Perhaps this topic helps: http://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid — Paul van den Dool, Apr 21 '17 at 14:03

Michael Benjamin · Accepted Answer · 2017-11-04T16:42:28.753

Aligning the last items in a flex container can be tricky. There are currently no built-in properties or methods in the flexbox spec for targeting the last item in a row / column.

But there are many hacks, including the use of invisible flex items and pseudo-elements to occupy space and, therefore, achieve the desired alignment.

This is all covered in the following post:

Targeting flex items on the last row

However, your layout can be easily achieved with Flex Layout's sister technology, Grid Layout:

.parent {
  display: grid;                                                  /* 1 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));   /* 2 */
  grid-auto-rows: 200px;                                          /* 3 */
  grid-gap: 10px;                                                 /* 4 */
}
.child {
  box-shadow: 0px 0px 0px 1px black;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

codepen

Notes:

Establish block-level grid container. (spec reference)
Enable the grid to create as many columns as can fit on the screen (auto-fill). Each column can be a minimum width of 200px, and a maximum width of 1fr (i.e., proportion of free space; similar to flex-grow: 1). (spec reference)
The grid will automatically create new rows to accommodate wrapping grid items. Each row will have a height of 200px. (spec reference)
Shorthand for grid-column-gap and grid-row-gap. Sets a 10px "margin" around each grid item. (spec reference)

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)
Firefox - full support as of March 6, 2017 (version 52)
Safari - full support as of March 26, 2017 (version 10.1)
Edge - full support as of October 16, 2017 (version 16)
IE11 - no support for current spec; supports obsolete version

Here's the complete picture: http://caniuse.com/#search=grid

Thanks for this knowledge :) – Mr_Green Apr 21 '17 at 14:07 — Mr_Green, Apr 21 '17 at 14:07
Looks great.. with detailed explanation. Thanks again!! – Mr_Green Apr 21 '17 at 17:32 — Mr_Green, Apr 21 '17 at 17:32

Don't show wide gap between items when they don't fill the row

1 Answers1