CODEWITHSUNDEEP
htmlcssflexboxcss-grid
Mr_Green
Mr_Green

Reputation: 41822

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

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>

Upvotes: 3

Views: 87

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370993

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:

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:

  1. Establish block-level grid container. (spec reference)
  2. 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)
  3. The grid will automatically create new rows to accommodate wrapping grid items. Each row will have a height of 200px. (spec reference)
  4. 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

Upvotes: 2

Related Questions