Cross-browser support for the CSS3 Flexible Box Model. Check out The Playground to see it in action.
- IE 6-9
- Opera 10.0+
The Flexible Box Model is supported natively by these browsers:
- Firefox 3.0+
- Safari 3.2+
- Chrome 5.0+
In addition, Flexie attempts to normailze browser inconsistencies with the flexible box model.
- box-orient
- box-align
- box-direction
- box-pack
- box-flex
- box-flex-group
- box-ordinal-group
I really wanted to use the CSS3 Flexible Box Model.
It works like Selectivizr. In fact, it uses Selectivizr's engine to traverse your style sheets and looks for display: box elements. After that, it looks for any of the currently supported properties.
Note: Flexie looks for non-vendor-prefixed properties. For example, it will ignore -moz-box-pack, but not box-pack. For best results, make sure to use a non-vendor-prefixed property in addition to your prefixed properties. But you were already doing that to future-proof your code, weren't you?
No setup on your end, just stick Flexie in your markup after your selector engine of choice.
See the things you need to know
-
For older browsers (IE < 8), please remember that some advanced selectors (child, adjacent, pseudo-selectors) will fail. Flexie does not attempt to bridge this gap, so if you must support legacy browsers, class names and ID selectors are your best bets.
-
As of FF 4.0 / Chrome 7 / Safari 5, Gecko and Webkit differ slightly in their flexbox implementations.
Of note is their default values. Webkit will default tobox-align: start, while Gecko defaults to the spec-definedbox-align: stretch. Make sure your flexbox CSS works on both these browsers before adding Flexie.- As of version 0.7, Flexie normalizes the
box-alignproperty across Webkit browsers. - As of version 0.8, Flexie normalizes the
box-packproperty in Gecko.
- As of version 0.7, Flexie normalizes the
-
Be careful of pseudo-selectors (i.e.,
:nth-child,:first-child). While native flexbox does not modify the DOM, Flexie must. Thus, your CSS properties might not apply as intended. For example, if you use a combination ofbox-direction: reverseand a:first-childselector, that selector will target the wrong element. And if you followed all of that, congratulations. -
There may be cases where the floats used to mimic the flexbox layout drop in Internet Explorer browsers. If possible, you can try the overflow fix to snap these into place (Flexie assumes it cannot use this as a workaround due to the impact this may have in your layouts).
-
As of YUI 2.8.2r1, YUI's selector engine does not recognize dashed attributes (i.e. [data-name="foo"]). Flexie uses several data- attributes as element flags. A bug report has been filed about this issue, but in the meantime YUI remains incompatible with Flexie.
You can run Flexie asynchronously in case you cannot purely on style sheets. All parameters are optional, unless otherwise stated:
var box = new Flexie.box({
target : document.getElementById("foo"),
orient : "horizontal",
align : "stretch",
direction : "normal",
pack : "start",
flexMatrix : [1, 1, 1, 1],
ordinalMatrix : [0, 0, 0, 0]
});
- target (required) The flexbox parent element. This must be a DOM node.
- orient
(optional) Possible values:
horizontal,vertical - align
(optional) Possible values:
stretch,start,end,center - direction
(optional) Possible values:
normal,reverse - pack
(optional) Possible values:
start,end,center,justify - flexMatrix (optional) An array of values to apply to the parent's children. e.g.: flexMatrix : [1, 0, 0] // Three child nodes contained, the parent's first child has a box-flex value of 1 flexMatrix : [1, 0, 1] // Three child nodes contained, the parent's first and last child have a box-flex value of 1 flexMatrix : [1, 1, 1] // Three child nodes contained, all children have a box-flex value of 1
- ordinalMatrix
(optional) An array of values to apply to the parent's children. See
flexMatrixfor an example.
Used to redraw currently active Flexie objects (i.e., after dynamically updating a flexbox element). All parameters optional.
Note: Calling this method without parameters will update all instances.
- target (optional) The flexbox element to update.
- params (optional) An object of flexbox properties to update. See Creating a new Flexie Object for accepted parameters.
Returns the target instance
- target (optional) The flexbox instance to retrieve.
Destroys the target instance.
Note: Calling this method without parameters will destroy all instances.
- target (optional) The flexbox instance to retrieve.
An exposed object detailing the level of flexbox support. Returns false for no support.
Selectivizr, for their fantastic CSS parsing engine.
The MIT License
Copyright (c) 2010 Richard Herrera
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- rich {at} doctyper {dot} com
- @doctyper on Twitter
- http://doctyper.com
- Flexie on GitHub: http://github.com/doctyper/flexie