Not sure how best to approach this layout

[bernk]

I posted my question on stackoverflow but it hasn’t garnered much attention there. I’m hoping someone here can offer some input.

Also started up a codepen but haven’t gotten far with it.

[Paulie_D]

Clearly the best place to start would be to achieve the expanded layout in flexbox first and then work backwards.

[bernk]

Not the most constructive of replies, but thanks anyway as you’ve been the only person to reply so far (here and on Stack).

The problem is achieving the expanded layout. Any suggestions for that? By the way, if it helps visualize the layout is that of a form with labels and buttons.

[Paulie_D]

From what I recall, I suggested three columns but that doesn’t include the really hard part…the equal heights.

Easy enough (apparently) with flexbox when dealing with rows but AFAIK there is no ‘equal height’ setting in flexbox when dealing with elements in columns but I freely confess I’m not that into flexbox as yet.

I’m not saying it’s impossible but I do think you are pushing the boundaries until css grid-layout comes onstream.

[Paulie_D]

Closest I’ve got so far with tinkering with flexbox.

http://codepen.io/Paulie-D/pen/32c7f59d1163dce8a4ffaaacdccda8e4

Still hard to wrap my head around all the various properties.

[Author]

Posts