Workaround: Android 2.3 ignores justify-content: space-around

[benfrain]

Not exactly a bug, more a limitation of the prior spec http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ that Android 2.3 works against.

If you have a flex parent and set justify-content: space-around Android 2.3 will ignore the declaration entirely. This may result in non-optimal layout as all flex-children will justify to the flex-start. You may find it preferable to use both possible space-* declarations for justify-content. This will get you space-between in Android 2.3 and space-around in modern implementations which may be preferable depending upon your goals.

Working example: http://codepen.io/benfrain/pen/yymaOr

.wrapper {
    display: flex;
    flex: 1 1 60%;
    /* Android 2.3 understands the first declaration and ignores the second */
    justify-content: space-between;
    /* Modern browsers overwrite the first declaration with the second */   
    justify-content: space-around;
}

[philipwalton]

Interesting. I wonder if this is something that could/should be handled by autoprefixer. @ai do you have any thoughts on this?

[benfrain]

I suppose the problem with @ai handling it is that the preferred 'fallback' may differ depending upon the needs. If an author can't get space-around, they may actually prefer flex-start (or flex-end or center) over space-between so it would be difficult for autoprefixer to be prescriptive.

[ai]

Yeap, Autoprefixer has no config, so it applies only 100% solutions. And this is why it doesn't apply any polyfills or fallbacks like this.

But you can create other PostCSS to apply this fallback. For example, Chinese Taobao creates CSSGrace with IE 6-7 fallbacks.

[philipwalton]

Yeah, you guys are right. I didn't fully think it through. Though it does seem relatively safe to say that most users would be happier with a space-between fallback, as @benfrain originally pointed out.