- This topic is empty.
February 22, 2016 at 1:38 pm #238296yeeyangParticipant
I’ve got a list of items within a
display: flexcontainer. 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/yedrbNFebruary 22, 2016 at 2:44 pm #238304bearheadParticipant
justify-content: space-aroundI really doubt if this is possible…
You could try switching to
space-betweeninstead and then using this little bit of trickery:
flex: 0 1 200px;
It sort of works, but it is still goofy at some widths :(
Really, flex-box is not designed to execute this sort of layout…
You can sort of fake the behavior with floats and media queries:
The sort of layout you’re after does seem like it makes most sense if it were executed using a basic grid systemFebruary 22, 2016 at 5:28 pm #238309yeeyangParticipant
I think it’s probably the best solution possible. The problem with the with
space-betweenis 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!February 22, 2016 at 11:47 pm #238314Paulie_DMember
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.February 23, 2016 at 5:21 am #238319priyadarshigParticipant
Some browsers not support Flexbox instead of this you can use display:inline-block;February 23, 2016 at 6:01 am #238325Paulie_DMember
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).
- The forum ‘CSS’ is closed to new topics and replies.