Jump to content

Display Flex adding lots of unnecessary spacing


simona6

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

Link to comment
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.

Link to comment
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?

Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
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.  

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.