CSS Flexbox: Left Align the Space Around

[yeeyang]

I’ve got a list of items within a display: flex container. Each item is a set and static height and width flex: 0 1 200px. I want to have each item equally spread out in space to take advantage of the flexing.

The problem is that when I have an unequal amount of items based on the width of the screen, I want to keep the items ‘left aligned’. To better illustrate, please see the following pen and note the bottom of the items: http://codepen.io/ahabion/pen/yedrbN

[bearhead]

With using justify-content: space-around I really doubt if this is possible…

You could try switching to space-between instead and then using this little bit of trickery:

.flex-container:after {
content: "";
flex: 0 1 200px;
margin: 5px;
}
It sort of works, but it is still goofy at some widths :(
Really, flex-box is not designed to execute this sort of layout…

http://codepen.io/kvana/pen/dGBBbP

You can sort of fake the behavior with floats and media queries:
http://codepen.io/kvana/pen/ZQdNVR

The sort of layout you’re after does seem like it makes most sense if it were executed using a basic grid system

[yeeyang]

I think it’s probably the best solution possible. The problem with the with space-between is that I don’t know if I’ll always have an even list or not because it’s a dynamic list thats coming back. I like it but will probably need to have JS take over at that point. Thanks for the help!

[Paulie_D]

Basically, as has been said, you can’t. That’s not the way the line box model works.

There are suggestions to add extra invisible zero width elements after the last visible item which will enable this but they’re pretty hacky.

[priyadarshig]

Some browsers not support Flexbox instead of this you can use display:inline-block;

[Paulie_D]

Some browsers not support Flexbox instead of this you can use display:inline-block;

They’re in NO layout method that will do this (except perhaps CSS Grid and they’re a looooong way off).

[Author]

Posts