HTML and CSS Reference
In-Depth Information
Yo u c a n p u t y o u r c r o s s - b r o w s e r fl e x b o x i n t o a c t i o n u s i n g y o u r o l d f r i e n d M o d -
ernizr. Modernizr detects support for the new Flexbox syntax (
flexbox
/
no-flexbox
)
and the old version (
flexbox-legacy
/
no-flexbox-legacy
).
Look at the code download file our-friends-flexbox-modernizr.html. This is
the same as the previous example you looked at except that Modernizr is included
on the page, and a whole raft of legacy Flexbox properties are applied to browsers
that only support the old syntax using Modernizr's descendant selector system. I
won't list all of the fallback code here, but you can find it under the “Modernizr
fallback rules” flag in the our-friends-flexbox-modernizr.html file.
These properties work fairly well and are fairly self-explanatory, although I
found that
box-flex
(the old syntax of
flex
) seemed to work slightly oddly and
unreliably. Hopefully, browsers will support the new syntax soon so that this kind
of craziness will become a thing of the past!
TIP:
To p r To v i d e b r To w s e r s t h a t d To n ' t e v e n s u p p To r t t h e To l d F l e x b ox
syntax with alternative layout rules, use
.no-flexbox-legacy xxx { ... }
.
