Stop flex items matching the same height as others?

Hi there,

I have some div items that I am trying to have appear under each other and so they don’t match the height of other items. I am currently using flex.

This is what I am trying to achieve:

This is a fiddle, but as you can see, the ones with less text in are matching the height of the tallest ones. Also, they are not appearing under each other to fill the space.

https://jsfiddle.net/toolman/mk2w5Lye/3/

Can anyone help me achieve this?

Thanks

Hi there toolman,

have you considered using “CSS columns” yet?

coothead

Hi,

Thank s for the reply.

I have tried the following, but no luck.

flex-direction: column;

Am I adding it to the wrong element?

.nc-listings{
    display: flex;
    flex-wrap: wrap;
     flex-direction: column;      
    align-items: stretch; 
}

Hi there toolman,

I think that you misunderstood my question. :rofl:

I will try and make it a little more precise…

Have you considered using “CSS columns”,
instead of using “Flex” yet? :biggrin:

coothead

1 Like

Yes something like this is the only way to do it cross browser.

Unfortunately you can’t do it in horizontal order (you can in chrome if you include flex as well and then re-order items but doesn’t work in Firefox and others).

2 Likes

Hi there toolman,

You can also see a column responsive example here…

https://codepen.io/coothead/full/BajRPgB

…and the code here…

https://codepen.io/coothead/pen/BajRPgB

coothead

2 Likes

Thanks for the examples :slight_smile: They Work perfectly. I’m guessing with @PaulOB’s example I would need to remove columns at various breakpoints.

Thanks again :slight_smile:

Sorry, I forgot to ask, @coothead, is it cross browser?

Hi there toolman,

It tested OK in Firefox, Chrome, Vivaldi on Linux Mint
and IE11- ( Windows 7 ). :ok_hand:

If you want me to test in Edge let me know and I will get my
Windows 10 SSD out to see. :winky:

coothead

1 Like

Yes just add media queries where required.

e.g.

However the beauty of css columns is that you can go down from 4 columns to one without media queries if you just include a width in the columns property which will act as a min-width for the column and then reduce columns automatically.

e.g.

No media queries required at all :slight_smile:

1 Like

Thank you :slight_smile: Adding a width makes sense :slight_smile:

Hi again,

I am having an issue in that some of the items cutting off at the bottom of the container and starting again at the top, like this:

Is there a setting to stop this happening?

Thanks

Code please :slight_smile:

To stop items breaking you can use break-inside:avoid but some browsers don’t support that yet so if you look at the example I gave you will see in the comments that display:inline-block will keep blocks together.

 display: inline-block; /* stops block being split across columns. Could use break-inside: avoid for modern browsers; */
  break-inside: avoid;
1 Like

Thank you, that worked perfectly. I’m sure I tried adding display: inline-block, but I must have miss-uploaded or something silly.

Thank you :slight_smile:

1 Like