Forums

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

Home Forums CSS Can flexbox span two rows?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #205053
    bikejunkie
    Participant

    Hello folks;
    I bet this is easy for you, but I’m struggling. There’s a cool pen that I grabbed for image-grid code. Since I have one category that needs a portrait image, I started working on one <div> that spanned the rows.
    Sadly it’s fighting me.
    Here’s the original. http://codepen.io/jayshua/pen/EaZYEY?editors=110

    Here’s what I’m working on. http://codepen.io/Cornucopia/pen/doKvPr?editors=110
    The column does span, but the four images wont take up the remaining space. Wouldn’t it be easier just to change the ‘Portrait’ section so that it spanned and the lower two shifted to the left?

    #205055
    Paulie_D
    Member

    It sounds like you need anelement to be in two rows at the same time…that’s not possible. flexbox lays out elements and all standard HTML elements are rectangular (for now).

    Do you have an image of what this is supposed to look like. I suspect you’re after some kind of masonry effect and flexbox won’t help much there

    #205067
    bikejunkie
    Participant

    Thank you Paulie;
    I was thinking that what would be ideal is to have the same layout as the first codepen, but flipped 90 degrees using ‘flex-direction:column’
    that hasn’t seemed to work.

    I can’t reach my server right now, but here’s one off a friend’s.

    http://tarfman.net/computer-images/temp-screen.jpg

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