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
are0 0 auto
rather than0 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
andflex-direction: column
will not properly calculate their flexed childrens' sizes if the container hasmin-height
but no explicitheight
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.
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)