flex help for grid layout

[tracybags]

Hi All,
I have a content area of a page which is made up of 4 25% divs, then 50% divs on media query. I was using float but have just discovered (sorry!) FLEX !! I came by masonry on my travels but that blew my mind so now I’ve found flex. So I removed my floats and set my flex container – kept my percentages and height auto. Everything is good-ish. As each child div has different lengths, I want them to take up the spaces that the differing columns create. I will have four such pages on the site. Each will be different, and each will change the heights of the child divs every 2 months, so vital that the height is auto.
Is this an easy style to put in (I’ve tried a few learing from a blog on this site)? Or am I going down the wrong road with ‘flex’ to achieve what I’m after. I don’t care what order the different divs appear in, they can move about to find the best space – which is what I thought flex was all about.

Sorry if my questions are terrible, I have only just found flex and I’m very excited!!!
codepen: http://codepen.io/charlieapple/pen/LVvRdE

live pages http://www.darlingmagazine.co.uk/cobhamR-advertisers.html
http://www.darlingmagazine.co.uk/wimbledonR-advertisers.html

You will know exactly what I’m trying to do when you take a look (if I have not explained myself very well).

Thank you so much.

[Paulie_D]

I confess that I’m not sure what effect you are going for.

A couple of images would be better than a couple of thousand words.

EDIT- Also, trimming that Codepen down to just the relevant HTML & CSS would be good.

[tracybags]

Sorry Sorry Paulie_D, I try to be brief honest I do :)
Okay so result here: http://www.darlingmagazine.co.uk/cobhamR-advertisers.html
Question: how to get row 2, col1-3 to move UP so the flow of the divs fill in all those gaps.

better?

[Paulie_D]

See, now we’re back to Masonry…

Flexbox can’t do that, it’s not a replacement for Masonry

Unless you are actually using columns it’s just not going to happpen and even then it may not look like you expect.

To get the columns to wrap you’d need to set a height on the parent div and the order you’d get might not be what you are after.

[tracybags]

okay, many thanks Paulie_D, I will go and investigate Masonry some more. Thank you for your time and expertise :)

[Paulie_D]

I’m not saying it can’t be done but you need to strip this down to the basics.

Do you care about the order in which the lists appear on top of one another?

Also, you really need to think about using more classes instead of IDs. You have 8 ‘adbox’ divs in there, all essentially with the same styling but instead of using a single class, you have 8 ID all saying the same thing.

It’s accepted practice not to use IDs at all unless you need them for JS hooks or very specific reasons.

This design…it might be an interesting exercise that I may look into separately when I have some free time.

[Paulie_D]

http://codepen.io/Paulie-D/pen/KpYNVE

[tracybags]

Thanks so much Paulie_D – the advice about best practice is great becasue I was worried about my repeat divs, was going to revisit once I’d got things working. I didn’t know about NOT naming DIVs, I thought it was good practice so you can identify things but it is a pain so I’m glad to learn that also. THANK YOU!!!

Now, onto the fabulous lists that you seem to have cracked! I have looked at your code to try and understand what you’ve done (such an amazing way to learn from real people :) ) – I have a question or 2 please on what you’ve done:
1. the result shows 2 columns and I’d like 4 columns – how do I do that?
2. doing it this way, does that mean I don’t ahve to bother with media queries telling it when to size down? As I had before a 25% x 4, then a 50% x 2.

I just wanted to ask those things before I go and modify my pages.

Utterly grateful to you :)

[Paulie_D]

I wouldn’t say I’ve cracked it and, to be honest, I’d have to tinker with it to see if fixed width columsn is possible but the limiting factor here is that the height determines when a column happens…not the width.

You might be better off with CSS Columns in this instance.

[tracybags]

Thank you Paulie_D – another option for me to learn about so off I shall go, but first I shall implement yours and see what happens! I’ll also take another look at Masonry.
Thank you for your time. I shall see you back here again on another post no doubt :)

[Author]

Posts