Flexiejs.com has browser polyfill for CSS flex boxes, but it is based on an earlier draft on the topic, which is incompatible with the current W3C Candidate Recommendation CSS Flexible Box Layout Module. Is there any polyfill, at least partial, for flex boxes as defined in the CR?
Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage. Inline, for text. Table, for two-dimensional table data.
In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.
A flex container expands items to fill available free space or shrinks them to prevent overflow. Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
Flexbox is very well supported across modern browsers, however there are a few issues that you might run into.
In short: at the time of writting (2014 Oct), there is no javascript polyfill that implements the W3C Candidate Recommendation.
There are 2 javascript polyfill implementations:
Flexie.js
barely had any update since mid 2012 - see the contribution graph - and only support the 2009 Flexbox model, that means a limited set of property.
Reflexie.js
is still untouched at the time of writing (2014 Oct), and as pointed out by Ilya Streltsyn
in another answer's comment, "it's still 'Sooooo not ready for prime-time'" as the author stated on the main page of the project. Latest commit was made on 1 Nov 2012...
Resources
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With