Stop flex items matching the same height as others?

HTML & CSS
1

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:

image
image1124×549 9.88 KB

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.

Can anyone help me achieve this?

Thanks

2

Hi there toolman,

have you considered using “CSS columns” yet?

coothead

3

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; 
}
4

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
5

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
6

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
7

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:

8

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

9

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

2 Likes
10

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
11

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

12

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:

image
image1233×718 62.2 KB

Is there a setting to stop this happening?

Thanks

13

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;
2 Likes
14

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
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.