Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox columns and rows

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #254734
    neilmerton
    Participant

    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

    #254752
    Paulie_D
    Member

    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

    #254756
    processprocess
    Participant

    This tutorials is also good https://flexbox.io/
    Rip through a few tutorials and you’ll be good to go.

    #254768
    neilmerton
    Participant

    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

    #254785
    Paulie_D
    Member

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.