- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi all,
I’m trying to get my head around using flexbox columns and rows and not sure where to start.
I’ve created a Pen with my desires (using some illustrations) and have structured the HTML and some SCSS.
Could someone please provide me some guidance on this?
Much appreciated.
Neil
You seem to have omitted any attempt to solve this yourself.
We’re happy to help you with code thatjust won’t work write but we’re not a code writing service.
Take a stab at it and if you run into problems we’re here.
I’m sure Chris has a few videos on flexbox somewhere and the help on it…erm, extensive
This tutorials is also good https://flexbox.io/
Rip through a few tutorials and you’ll be good to go.
Thanks for the tips – I’ve updated the Pen to include my progress (almost there!).
What I can’t figure out is how to get the orange blocks (document__area-header) to be the same height (dependent on the highest orange block) and then the scroller blocks (document__area-scroller) to occupy the remaining vertical space in the three columns (document__structure, document__content and document__collaboration).
Any help here would be appreciated.
Many thanks,
Neil
What I can’t figure out is how to get the orange blocks (document__area-header) to be the same height (dependent on the highest orange block)
Ahhh…you can’t do that.
There is NO flexbox method of equalising the heights of elements that do not share a parent element.
You will need javascript to do that…or perhaps CSS Grid Layout.
Most likely Js here.