1

How can I, without media queries, get the behaviour of justify-content: space-between for a flexbox when its children fit inside it, but when they need to wrap, get the behaviour of justify-content: center?

I've made a JS Bin to show what I mean. I want the characteristics of the top two containers, but can only manage to get either orange/red or green/blue.

dontexist
  • 5,252
  • 4
  • 27
  • 51
  • mediaqueries can be used to update your justify-content value if boxes have fixed width, else, you will need javascript to check it out and toggle this value (via a class) – G-Cyrillus Sep 08 '16 at 12:37
  • I'd really rather not use neither media queries nor JavaScript to solve this problem. I'm pretty sure it can be done with pure CSS, I'm just not savvy enough – dontexist Sep 08 '16 at 12:43
  • margin ? http://jsbin.com/gupageleqo/1/edit?html,css,output but still, you need to use class. Mediaquerie is CSS, give it a try ;) (.narrow example) – G-Cyrillus Sep 08 '16 at 12:47
  • Margin doesn't quite do it, because then they won't go to the far edges when they don't need to wrap: http://jsbin.com/yokoqujeco/1/edit?html,css,output I can't use media queries because there's no way of knowing how wide the container will be when the content wraps – dontexist Sep 08 '16 at 12:52
  • Without mediaqueries or JavaScript you can't change the value of a property –  Sep 08 '16 at 12:55
  • 2
    align-items, justify-content or margin is the same issue, mediaqueries is here to provide breakpoints indeed. You need to know or choose where when switch from a behavior to another. Javascript could be more subtil ;). CSS won't update a rule on its own :( – G-Cyrillus Sep 08 '16 at 12:56
  • I'm just saying I want the behaviour of `justify-content: center`, it doesn't necessarily need to be set and therefore media queries and JS are theoretically not necessary. But thank you for trying to help :) – dontexist Sep 08 '16 at 12:58
  • 2
    Consider `justify-content: space-around`. When a single flex item wraps, in `justify-content: space-between`, it computes to `flex-start`. But when a single flex item wraps in `justify-content: space-around`, it computes to `center`. http://stackoverflow.com/a/36487987/3597276 – Michael Benjamin Sep 08 '16 at 13:23
  • 1
    @Michael_B That's what I ended up using. It's not equivalent to what I wanted, but it looked good enough. – dontexist Sep 08 '16 at 13:48

0 Answers0