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
  • #246007
    Alexandre Dieulot


    I just got started with flexbox, in the hope of getting this layout:

    But all it seems I can get out of flexbox is this:

    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.


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

    Alex Zaworski

    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.