Flexbox compatibility (emphasis on kindle fire)

Question

So I have a question pertaining to flexbox support on Kindle devices, and if you have anymore information on overall support in general. It seems that the display:flex and flex-wrap:wrap/nowrap properties aren't supported, at least on the earlier kindle fire devices (I've read it is on the newer ones but have no way of testing). It looks as though flex:box (the older version of flexbox is supported however).

I've taken to using different display properties and then using the @support (display:flex) or (flex-wrap:wrap) to target devices that support flexbox in a progressively enhanced manner (if they support flexbox odds are they support media queries) so firefox has no issues on the wrap (also use the url-prefix for -moz-), and kindle fire has no issues overall, but am wondering if there is another solution out there? I mean this method nearly doubles the layout code.

www.caniuse.com only states that opera-mini 5-7 and IE 8-9 lacks support, and has known issues for: (also displays vendor prefixes which I resolve with AutoPrefixer)

Firefox does not support specifying widths in percentages.

IE10 and IE11 default values for flex are 0 0 auto rather than 0 1 auto, as per the draft spec, as of September 2013.

Firefox does not support flex-wrap, align-content properties.

In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.

and has an article on cross-browser support: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

But I have been unable to find anything relating to the kindle devices.

Answer 1

sadly yes, it doubles and probably more the layout code, this is why imho you shouldn't use, for example, flex-wrap since it's available only on chrome21+, because it will carry you to create a totally different layout

support only the ~standard syntax, the MSIE10 syntax (which is very similar) and the -webkit- legacy syntax (for android 2.x support)

• @supports isn't widely available yet

• for feature detection i suggest modernizr; plus, on github there are various plugins for testing against specific flexbox properties/values, or you could write them yourself

• however kindle fire is android 2.3, then it more than likely uses Webkit 533, therefore it supports the legacy flexbox -webkit- syntax

• flex:box never existed, but (moz|webkit)box-flex:1 and display:(moz|webkit)box

• default values aren't a problem, just do *{...} to normalize them

• flex-wrap:wrap isn't widely supported (firefox 29, chrome 21, msie11) so you shouldn't use it... if you want something similar you may use the multi-column layout module for vertical flow or inline-block for horizontal flow. sadly at the moment this is the best choice

• percentages work on firefox (http://jsfiddle.net/RBaR2/)... the missing percentages support bug refers to the old -moz-box syntax, that you shouldn't use (really really old firefox)

http://dundalek.com/css3-flexbox-reference/

http://zomigi.com/blog/flexbox-syntax-for-ie-10/