0

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.

darcher
  • 3,052
  • 3
  • 24
  • 29
  • If Kindle only supports the original Flexbox draft (which you already know from your own testing), the problem is what exactly? – cimmanon Jan 07 '14 at 17:15
  • I guess I was hopeful that someone would say there was a new and "easy" method or polyfill that would resolve the added development time of making flexbox compatible and fully supported specifically with the `flex-wrap:wrap;` property. Unfortunately, as I suspected and as Wes pointed out, I must still use older methods with the new to achieve full support. – darcher Jan 12 '14 at 16:40

1 Answers1

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/

  • You sir are a champ. Thanks for the quick response. Flexbox just simplifies items so much I think I'm trying to will it to work as opposed to approaching this logically. I'm going to leave this as a +1 not a correct answer for a while to draw more attention and see what others have to say, but I appreciate your answer greatly and will probably mark it. – darcher Jan 07 '14 at 00:08
  • 1
    Modernizr incorrectly reports Firefox as supporting Flexbox thanks to DHolbert's efforts (see: https://github.com/Modernizr/Modernizr/issues/744). – cimmanon Jan 07 '14 at 17:11
  • Thanks for that cimmanon. And I just noticed why you said `flex:box` never existed, I meant `display:box`, must have been a tad absent minded during write up. – darcher Jan 12 '14 at 16:33