Jump to content
#StayAtHome ×
simona6

Display Flex adding lots of unnecessary spacing

Recommended Posts

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'?

tile-screenshot.jpg

Share this post


Link to post
Share on other sites

Try adding this to your CSS:

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

 

Share this post


Link to post
Share on other sites

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

ss.jpg

Edited by simona6

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
.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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

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 by simona6

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.