- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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
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
.