Forums

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

Home Forums CSS Align images like masonry using flexbox

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

    Hi,

    can help me with a “simple” css, imagine the following scenario:

    1 vertical image, 2 horizontals, the ideia is to make both a square;
    in the possibility of 4 imagens, 1 vertical and 3 horizontals the vertical align to left and the 3 img on right side, one above other.

    if all vertical or horizonta, make them 2 side by side on 2 column.

    Desktop View: https://i.imgur.com/XeLOlkO.jpg

    Thank you in advance.

    best regards

    #279823
    Paulie_D
    Member

    You can’t do that natively with flexbox unless you have additional wrapping elements.

    I’d recommend CSS-Grid instead.

    #279825
    vulkanus
    Participant

    @Paulie_D

    Thank you for your answerd. I´ll try it, but can you look here: https://codepen.io/Vulkanus/pen/jQRpPr
    I have already that code, but I can´t adjust all item in the same column/direction. Something is missing.

    Can you help?
    Thank you

    #279829
    Paulie_D
    Member

    This is what I am saying…you can’t do Masonry with flexbox….it’s just not suitable.

    He’s the (to my mind) definitive answer – https://stackoverflow.com/questions/44377343/css-only-masonry-layout

    #279867
    vulkanus
    Participant

    @Paulie_D

    thank you.
    I understand. I´ll try with masonry display: grid;

    Best Regards.

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