space-x does not play well with line wraps

[jochenstu]

Hello,

space-x may produce undesirable behavior in line wrap scenarios – like so:

While it's obvious why this is happening, a one-size-fits-all-solution is not. Still, given the mobile-first paradigm and a mostly left-to-right audience, I would propose switching margin directions around.

Thoughts, ideas?

[adamwathan]

Yeah this is a known limitation. If you know you need your content to wrap the only good solution is to use wrapper elements and negative margins, because even swapping the the margin to the other side means now items will wrap too early:

So personally I am not too concerned about trying to solve for the wrapping case, I'm okay with it being a known limitation and recommending people do something more sophisticated if that's something they need to support.

Still it may be a better default because there isn't really anything about the current solution that is better (the current solution has a lower specificity but it's still higher than regular utilities). Would just have to decide if it would constitute a breaking change or not I suppose.

[jochenstu]

Fair enough. How do you feel about this: https://codepen.io/jochenstu/pen/dyYNagY

(Tested only in Chrome)

My concern is if this (in addition to what the utility already does) pushes space-x too far into magic territory. On the other hand, that can of worms has been opened already, might as well make it the best magic we can 😄

I feel the declarative nature of space-x gives some leeway to introduce breaking changes, since, more often than not, the visible outcome will stay the same and nothing will actually break (specially given how new it still is).

Still, your point obviously stands: It is a potentially breaking change. Is this good enough to warrant a change? Is it even good?