Clever Geek Handbook

Don't show a large gap between elements when they don't fill the line

Please check the fiddle where when you resize the window and when the cards are lowered the bottom of the cards looks weird with more space in between. I want these bottom parts of the cards to be aligned with the above cards.

I know it can be done easily with display: inline-block

, but I am trying to do it with flexbox ie 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>
Run codeHide result


+3


source to share


1 answer


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 using invisible flexes and pseudo-elements to take up space and therefore achieve the desired alignment.

All of this is covered in the following post:

However, your layout can easily be achieved with Flex Layout's skeletal 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>
Run codeHide result


codepen

Notes:

  • Place a block level grid container. ( spec specification )
  • Allow the grid to create as many columns as it can fit on the screen ( auto-fill

    ). Each column can be a minimum width of 200 pixels and a maximum width 1fr

    (i.e. a proportion of free space, similar flex-grow: 1

    ). ( reference specification )
  • The grid will automatically create new lines to place the grid items. Each line will be 200px high. ( spec specification )
  • Abbreviation for grid-column-gap

    and grid-row-gap

    . Sets a 10px "margin" for each grid item. ( reference specification )

Browser support for CSS grid

  • Chrome - Full support as of 8 March 2017 (version 57)
  • Firefox - Full support as of 6 March 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 the current specification; supports outdated version

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

+2


source






More articles:


All Articles