Display Flex adding lots of unnecessary spacing

[simona6]

Hi there.

I've got a DIV that has flex-wrap setup, and the tiles have a width set.  When a row is 'full', it tiles fine, but anything beyond that spreads out uncontrollably.  I've tried all sorts of things, but I cannot figure out the cause.

Attached is a screenshot of what happens, and below is the HTML/PHP and CSS.

.admin-influencers-tile-container
{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid #ffffff;
}

.admin-influencers-tile
{
position: relative;
margin-top: 30px;
margin-right: auto;
padding: 10px 10px 10px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
}

.admin-influencers-tile.small
{
margin-top: 20px;
padding: 5px 5px 5px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
    width: 120px;
    position: relative;
}

<div class='admin-gig-chosen-container'><h2 class='pink'>Facebook: 2000-5000 followers [20 needed]</h2><div class='admin-influencers-tile-container'><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div><div class='admin-influencers-tile small' style='color: #555555; font-size: 0.8em; text-align: center'>Available Slot
<div class='admin-influencers-tile-image small'><img src='/images/gigs-blank-avatar.jpg' /></div></div></div>

Why is it spreading and not just 'lining up'?

[maxxd]

Try adding this to your CSS:

.admin-influencers-tile-container::after{
  content: ' ';
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
}

 

[simona6]

Ooo almost, that shoves them up against each other, but with no spacing.

Edited February 17, 2020 by simona6

[maxxd]

You'll probably have to play some with the padding on that last sub-div. For what you're describing, though, you may want to try grid. Are you bound to support IE 9 and less?

[simona6]

Not really.  We use Chrome.  Or Safari.    I'll check the padding, as it must be in ther esomewhere.

[simona6]

.admin-influencers-tile-container
{
  display: flex;
  flex-wrap: wrap;
  width: 100%; 
}

.admin-influencers-tile-container::after{
  content: ' ';
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
}

.admin-influencers-tile
{
position: relative;
margin-top: 30px;
margin-right: auto;
padding: 10px 10px 10px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
}

.admin-influencers-tile.small
{
margin-top: 10px;
padding: 5px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
    width: 120px;
    position: relative;
}

This is the CSS at the moment.  I cannot get the spacing to be added.  Not sure why.

[simona6]

I have an update for you.

.admin-influencers-tile-container
{
  display: flex;
  flex-wrap: wrap;
  width: 100%; 
}
# not sure what this 'after' part is...
.admin-influencers-tile-container::after{
  content: ' ';
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
}
# this is each tile for the bigger container we have
.admin-influencers-tile
{
position: relative;
margin-top: 30px;
margin-right: auto;
padding: 10px 10px 10px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
}

# this is the smaller boxes we are looking at here.
.admin-influencers-tile.small
{
margin-top: 10px;
padding: 5px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
    width: 120px;
    position: relative;
}

I've added comments to the CSS.

In addition, the line in .admin-influencers-tile for "margin-right: auto;" just adds a margin to the right of all the tiles, but we don't set it.

When it goes to the next line, it seems not to use that margin now, with that "after" CSS code.  Why might that be?

[maxxd]

Give this a shot and see what it does for you:

.admin-influencers-tile:last-of-type{
  padding-left: 15px;
}

 

48 minutes ago, simona6 said:

When it goes to the next line, it seems not to use that margin now, with that "after" CSS code.  Why might that be?

I'm not entirely sure what you're asking here, sorry. The after pseudo-selector creates an empty div that will expand or shrink to fill the leftover space. It's not a perfect fix for your situation (as you're seeing now), but if you can't use grid it's a good place to start. Again, however, if you're not worried about supporting legacy and abandoned browsers learning grid is totally worth it.

[simona6]

Here's what I am asking.............

The Flex expands it all nicely.  the first row the second row....... any row that is 'full', it expands lovely.

But get to the final row that is not full, and it doesn't.  I don't know the reason for that.

Perhaps your after CSS is pushing it HARD up against it all.  Not sure.

That additional but you just added makes no difference.  Sorry.

[maxxd]

I'm admittedly a bit rusty on my pseudo-selectors, so I may have something wrong with the :last-of-type use. If you're dynamically creating the page - the other thread I've seen about this project in the PHP Coding Help section didn't specifically say you were, but I'm assuming you are - you could always append a class name or data-attribute to the last card in the section div and style the padding-left off that.

[simona6]

Sorry I've no idea what you mean.

When I looked up Flex Divs, I read that they just wrap.  And if you set a margin right of Auto, the spacing is automatically set - but this could be the cause of the problem.  When it is not a "full row", it finds it impossible to add the right amount of margin.

But I don't know what the fix is.  

[simona6]

I love 'grid'!!

My only concern is that isn't responsive.  ie.  you have to state auto auto auto for three columns.  But when the screen goes smaller, it sticks to that, rather than wrapping.

Is there a means to make it wrap, else were are going to get horiz scrolls when it goes off the page.

 

UPDATE: Correction, it was creating scrolls as the tile had a width assigned to it!  It works great.

Edited February 19, 2020 by simona6

[maxxd]

Look up Jen Simmons and Rachel Andrew about grid - they're amazing with it (among other things they're both awesome at). Rachel Andrew has this repo that's also pretty fantastic.