Forums

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

Home Forums CSS Flexbox: mix between flex-start and space-around or space-between

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

    Hi!

    I just got started with flexbox, in the hope of getting this layout: http://image.noelshack.com/fichiers/2016/39/1475170271-untitled.png

    But all it seems I can get out of flexbox is this: http://codepen.io/anon/pen/zKdzAQ

    Is there a way to get wrapped elements to be aligned with elements on the first line, instead of them stretching on all the line’s width?

    I’ve been playing with permutations of justify-content, align-items and align-content, without success.

    #246011
    Paulie_D
    Member

    Basically there is no native way of doing that with flexbox There are some hacky methods but generally I can’t recommend them.

    http://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items

    #246020
    Alex Zaworski
    Participant

    Given that the widths are all known in this circumstance you can do some goofy stuff with nth-of-type, last-child, and margin:

    .box:nth-of-type(5n+2):last-child {
      margin-right: 195px;
    }
    
    .box:nth-of-type(5n+3):last-child {
      margin-right: 130px;
    }
    
    .box:nth-of-type(5n+4):last-child {
      margin-right: 65px;
    }
    

    But like Paulie said that seems pretty weird/bad… And also won’t work if the width is changing. Plus at that point you might as well use justify-content: flex-start.

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