doctyper / flexie

Legacy support for the CSS3 Flexible Box Model

Flexie enables the 2009 Flexbox model. You're probably looking for the updated spec. There is currently no polyfill for the new spec.*

* I've been working on one in my off-time. It's a beast.

Cross-browser support for the CSS3 Flexible Box Model. Check out The Playground to see it in action.

Flexie v1.0.3

Browser Support

• 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.

Currently Supported Properties

• box-orient
• box-align
• box-direction
• box-pack
• box-flex
• box-flex-group
• box-ordinal-group

Why?

I really wanted to use the CSS3 Flexible Box Model.

How?

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.

Requirements

See the things you need to know

Caveats

• 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 to box-align: start, while Gecko defaults to the spec-defined box-align: stretch. Make sure your flexbox CSS works on both these browsers before adding Flexie.

  • As of version 0.7, Flexie normalizes the box-align property across Webkit browsers.
  • As of version 0.8, Flexie normalizes the box-pack property in Gecko.

• 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 of box-direction: reverse and a :first-child selector, 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.

Asynchronous API

You can run Flexie asynchronously in case you cannot purely on style sheets. All parameters are optional, unless otherwise stated:

Creating a new Flexie Object

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 flexMatrix for an example.

Flexie.updateInstance(target, params)

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.

Flexie.getInstance(target)

Returns the target instance

• target (optional) The flexbox instance to retrieve.

Flexie.destroyInstance(target)

Destroys the target instance.

Note: Calling this method without parameters will destroy all instances.

• target (optional) The flexbox instance to retrieve.

Flexie.flexboxSupported

An exposed object detailing the level of flexbox support. Returns false for no support.

Acknowledgements

Selectivizr, for their fantastic CSS parsing engine.

Copyright and Software License

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.

Contact

• rich {at} doctyper {dot} com
• @doctyper on Twitter
• http://doctyper.com

Links

• Flexie on GitHub: http://github.com/doctyper/flexie

flexie's Issues

Uncaught TypeError: Cannot read property 'children' of undefined

Uncaught TypeError: Cannot read property 'children' of undefined

This seems to happen to me when I have an element that is display: box but doesn't have any children and its parent is NOT display: box. Setting the parent to display: box prevents this error.

Using the latest uncompressed flexie.js, this occurs on line 1071

Flexie Based On Prefixes

I know that the current version of Flexie is not able to support prefixes, is there anyway to change this? As most of you will know, the standard that Flexie polyfills is now only used for browsers that does not support the new standard, and so it is prefixed.

If Flexie could work with this prefixing then it would work very well with Autoprefixer.

IE8 Invalid Argument Error

Using some CSS to simulate hbox/vbox/etc. (from Alex Russel's blog) breaks Flexie on IE8 with the error:

Invalid argument. flexie.js, line 784 character 8

Here is the CSS, if you un-comment any of the commented lines you can trigger the error in IE8:

/* hbox and vbox classes */

.hbox {
 display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-align: stretch;

display: box;
box-orient: horizontal;
box-align: stretch;
}

.hbox > * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
display: block;
}

.vbox {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;

display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: stretch;

display: box;
/*box-orient: vertical;*/
/*box-align: stretch;*/
}

.vbox > * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
display: block;
}

.spacer {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}

.reverse {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
box-direction: reverse;
}

.boxFlex0 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
}

.boxFlex1, .boxFlex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}

.boxFlex2 {
-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;
}

.start {
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
}

.end {
-webkit-box-pack: end;
-moz-box-pack: end;
box-pack: end;
}

.center {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}

.alignCenter {
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}

Any plans for implementing the box-lines property?

IE9 and Firefox 7 needs it at least: https://bugzilla.mozilla.org/show_bug.cgi?id=562073

Adding more than one flexbox crashes everything

I used fix #33 to remove the error mentioned in #32. (I have more than one flexbox)

But by doing so, when loading the page, the browser completely crashes on me (Chrome, Firefox and IE9).

Here is part of my css to help you understand:

#h-wrapper #primary-nav ul.menu {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  width: 100%;
  padding: 0;
}
#h-wrapper #primary-nav ul.menu li {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  position: relative;
  line-height: 60px;
}
...
#h-wrapper #primary-nav ul.menu li ul.sub-menu {
  left: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  *zoom: 1;
  max-width: 980px;
  _width: 980px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}
...
#h-wrapper #primary-nav ul.menu li ul.sub-menu li {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  line-height: normal;
  border-right: 1px solid #b4b4b4 !important;
}

Any ideas on how to deal with this would be appreciated!

Not working(??)

Absolutely loving flexie's concept. But when I open the demos in IE8 they do not seem to be impacted by any means; I mean the pages render as if no flexie was included.

What am I missing?

box-ordinal-group fails on IE and Opera

It seems that box-ordinal-group only work when boxes are flex-box specified.

Case study : http://ie7nomore.com/fun/flexie/

IE9 throws error on local flexie.js but Playground works

I am getting the below error in IE 9.0.8112.16421 on Win7 x64. Both when using the packed and the regular javascript file. Joomla supplies Mootools 1.3.2, but I have also tried jQuery 1.6.4. Tried latest master and the flexie.min.js used in the Playground. Tried browser modes IE7,8,9 and several document standards variations. This very well might be related to my html/css but am not sure where to start looking, so any pointers would be appreciated. I have switched up a lot of the html/css already but this IE error remains. I tried to narrow down my html/css into this paste: http://jsfiddle.net/wQpN8/1/

SCRIPT5007: Unable to get value of the property 'length': object is null or undefined 
flexie.js, line 1021 character 15

Which would be:

function cleanPositioningProperties (children) {
        var i, j, kid, w, h;

        for (i = 0, j = children.length; i < j; i++) {

Chrome: Playground problems on Box Flex

Hi!

Just try it on Chrome (mine is 12.0.742.0):

1. Open playground: http://flexiejs.com/playground/
2. Put box flex to 1 : 1 : 1.
3. Change some box flex to 0 again.

On IE and Firefox works too fine.

Simple HBox style displaying vertically in IE7, IE8

Was having an issue with an hbox css style and made the simplest possible example demonstrating the issue. Problem is in HTML comment.

Here is the HTML:
https://gist.github.com/728509

Here is the accompanying CSS:
https://gist.github.com/728512

FIreFox 12+ support

According to http://caniuse.com/#feat=flexbox, Firefox has improved Flexbox support (From http://www.html5rocks.com/en/tutorials/flexbox/quick/). http://flexiejs.com/test/ shows that FireFox is not supported, but that seems to be a contradition to the caniuse web site.

CSS percent (%) value not working as expected in Firefox 3-21

Just reporting this Flexie bug for the previous -moz-box specs of Firefox which is probably valid for 'reflexie' to address too.

https://bugzilla.mozilla.org/show_bug.cgi?id=529761

Essentially percentages need to be converted to pixel value for 'fixed' sizes to work in Firefox 3-21.

Updated spec...

Maintainer's Note: Looking for flexbox enthusiasts to help build the next Flexie. The new spec is very detailed, and I don't have as much time as I'd like to devote to this project. You can help increase adoption of the new spec! Join in at https://github.com/doctyper/reflexie/tree/develop

@doctyper As you're probably aware the Flexible Box Model spec has been updated as of Nov 14th, 2011. I wonder what this means for your implementation. Are you actively maintaining flexie, do you intend to update flexie to conform with the spec changes? Will this break previous usage of flexbox/flexie? I suppose it will... What's your take on this?

Form child elements are resized if one of the box's children is a form element.

In the case where an element with the "box" display style contains an immediate child that is a form element, the width/margin/padding style calculations are applied to all descendent form control elements (input/select/etc...).

This is due to the way the appendPixelValue iterates over the target. Since HTMLFormElement DOM objects can be treated as arrays (i.e. formElement[0] == the first input control), iterating over a target that is an HTMLFormElement object with forEach restyles all elements in the form's array of input controls.

Observed:
Markup is modified to something like:

Expected:
Markup is modified to something like:

Using in production

I don't understand, is it usable in prodaction or not?

I see problems from Chrome users. Why??

Thanks!

Polyfill for the new spec?

Do you have a branch of your work on this you could push?

Does this require Selectivizr?

This isn't clear to me. It says it uses the Selectivizr engine, has lots of references to it, but doesn't state outright whether or not its a necessity.

TypeError: Cannot call method 'updateModel' of undefined

I'm using Flexie on a wordpress theme that uses Disqus for comments. The flexbox layout works fine, except on pages where Disqus (which adds comments after page load via JS) would cause the content column to grow longer -- instead of expanding to accomodate the new content, it just overflows out of the box.

I was able to find a JS trigger for when Disqus finishes drawing, and am using it to call Flexie.updateInstance() like so:

function disqus_config() {
    this.callbacks.afterRender = [function() {
        alert('hello');
        Flexie.updateInstance();
    }];
}

The alert triggers fine, but the Flexie command throws the following error: TypeError: Cannot call method 'updateModel' of undefined

Any ideas what I'm doing wrong?

Compatibility issue with wicket

In Internet Explorer 8 and 9, FlexieJS seems to cause an extra page load (as witnessed in the "Network" tab in the developer tools). This causes issues with Apache Wicket (a Java web framework). Wicket tracks page state in the session and on each page load a new version of the state is created. All the components on the page are attached to that version. What happens with FlexieJS on the page is that the components are attached to version, then FlexieJS triggers the extra page load invalidating the version the components are attached to. When you then try to do anything with those components, Wicket throws a StalePageException and the page refreshes, which just takes us back to step one.
Is there a way to bypass the extra page load?

Flexie Demo Doesn't Work

The /demo/ you include with the download doesn't work in at least FF 3.6.15 and Safari 5.0.4

"Fix crash if not used box-flex attribute" Resurfaced

It looks like this error has resurfaced (albeit in a different location): #12

I've ran into the exact situation presented in the Pull Request (if there's an element in the style sheet with a box-flex definition that is not present in HTML code, flexie throws the error). This time, it seems to be at line 143 of the de-obfuscated code (or line 5 of the minimized code).

Has anyone else run into this issue?

Code:

function da(a, d, c) {
        var b, e, f = [];
        h(c, function(g, i) {
/* !![Chrome's Inspect Element Script Debugger Inserted this message]!!
      flexie.min.js:5Uncaught TypeError: Cannot call method 'toLowerCase' of undefined */
            if (i.selector) {
                b = d(i.selector);
                b = b[0] ? b : [ b ];
                b[0] && h(b, function(j, l) {
                    switch (l.nodeName.toLowerCase()) {
                      case "script":
                      case "style":
                      case "link":
                        break;
                      default:
                        if (l.parentNode === a) {
                            S(l);
                            e = {};
                            h(i, function(m) {
                                e[m] = i[m];
                            });
                            e.match = l;
                            f.push(e);
                        }
                    }
                });
            } else {
                S(i);
                f.push({
                    match: i,
                    selector: $(i)
                });
            }
        });
        return f;
    }

Flexie Playground is not working in IE9

The Flexie Playground at http://doctyper.github.com/flexie/playground/ is not working in IE9 latest preview.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of doctyper/flexie!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library doctyper/flexie is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "doctyper/flexie",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

javascr

Border of border-box row items not accounted for.

If you add a border to a border-box row item. The total stretched width is smaller than it should, due to the border not accounted for (both vertically and horizontally). Issue reproduced on IE9 as seen on row 2 of this snapshot.

Throttle Resize Event

Would it be possible to change the resize event to only trigger at a set interval, for example every 250ms? The resize event listener in IE9 causes the browser to crash if the windows is sized down and then back up again in the same motion.

How to download the latest version of flexie.js

Hi,

I've tried to download flexie.js

However, the version that seems to be downloading from the master branch is about 2 years old and doesn't include the latest bugs and fixes.

Many thanks.

Does not work with IE10

At the moment, flexiejs will not work with IE10, and all elements display vertically.

README is out of date and misleading

The link to the W3C spec at the beginning of the README points to a newer version of the spec that flexie doesn't actually support.

W3C provides versioned URLs, so I think it would be clearer to link directly to the version that you do support.

IE9 crashes and doesn't complete the test-case

At first my compliments on this javascript 'plugin'. Designing and creating clean HTML will be much easier with the box-options. unfortunately IE9 crashes when the box-flex option is used in the CSS. When I delete the option box-flex from the CSS the browser won't crash; But the box-flex option is just the option I need, so it ain't the best solution to simply remove this option. Here is a small (incomplete) preview of my code.

in Stylesheet:

.columns-horizontale{
    width:100%; 
    display: -moz-box;
    display: -webkit-box;
    display: -ms-box;
    display: box;
}

.columns-horizontale > div{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    
    border-right:1px solid #000;
}

In HTML

<div class="columns-horizontale">
    <div>column1 </div>
     <div>column2 </div>
 </div>

Playground doesn't work

Hi, you forgot to add flexie axa http://doctyper.github.com/flexie/playground/flexie.js is missing.

IE9 flex problem

Here is a screenshot:
https://dl.dropbox.com/u/54069263/css-chan/flexie.v1.0.3.png

Version:
https://dl.dropbox.com/u/54069263/css-chan/flexie-ie9version.png

Live test:
https://browserling.com/queue?uri=http%3A%2F%2Fflexiejs.com%2Fplayground%2F&browser=explorer&version=9.0

Ignore child elements with 'absolute' or 'fixed' positioning

I have noticed that flexie applies a float to all child elements within a flexbox parent container. This includes child elements with the CSS position of absolute or fixed. Shouldn't these elements be ignored so that they don't take on any float or margin?

Broken with YUI3

YUI3 changed a bunch of stuff that causes flexie to no longer work.

In particular, YAHOO.util.Selector.query has turned into YUI().one.

Opera - Uncaught exception: DOMException: NO_MODIFICATION_ALLOWED_ERR

I am getting the following error when using Flexie in the latest version of Opera:

Uncaught exception: DOMException: NO_MODIFICATION_ALLOWED_ERR

I'm done some research but I can't seem to find anybody else with the same problem?

Flexie Generating 'GET http://domain.com/data:text/css, 404 (Not Found)' error

Occurs in Chrome. After investigating, determined the problem to be caused by ADBlock plugin. It modifies the source code:

See:
http://stackoverflow.com/questions/10446575/why-is-chrome-referencing-datatext-css-in-all-websites

IE8 crash if using flexMatrix

Using IE8 / flexie 1.0.3 / jquery 1.7.1 / selectivizr v1.0.2:

        var flexie = new Flexie.box({
            target: newElement[0],
            flexMatrix: this.options.use_flexie ? [0, 1, 0] : [0, 1],
        });

crashes at line 1551 because x.properties is null. Removing the flexMatrix argument fixes the crash.

The following seems to fix it. It does leave an overflow problem (the right hand column ends up on a new line when it should fill the current row), which might or might not be related to this fix:

--- a/Software/CurryWebContent/content/js/flexie.js
+++ b/Software/CurryWebContent/content/js/flexie.js
@@ -1547,6 +1547,7 @@ var Flexie = (function (win, doc) {
for (k = 0, l = flexers[key].length; k < l; k++) {
x = flexers[key][k];
max = NULL;

•                                                   if (x.properties != null) {
                                                  for (m = 0, n = x.properties.length; m < n; m++) {
                                                          rule = x.properties[m];
  

@@ -1554,6 +1555,7 @@ var Flexie = (function (win, doc) {
max = parseFloat(rule.value);
}
}

•                                                   }
                                                  if (!max || x.match[self.props.out] > max) {
                                                          appendPixelValue(x.match, self.props.pos, NULL);
  

IE6: Playground problems on Box Flex

Basically same that in Chrome ( #14 ) the Playground have problem on "play" with box flex. Just select 1 : 1 : 1, but the problem is just it. This break browser.

Obs: I'm using IETester.

javascript error when flexMatrix defined

Hello,

when I use the js api , with following :

var box = new Flexie.box({
target : document.getElementById("main"),
orient : "vertical",
align : "center",
flexMatrix : [1,2,7]
});

when ever I use flexMatrix I get a javascript error such that it points to line 1553 in version (1.0.3):

for (m = 0, n = x.properties.length; m < n; m++) {
rule = x.properties[m];
...

here , debugger says properties == undefined so length gives error. As a temporary workaround I put
if(x.properties) on top of the for loop

Replaces existing inline styles

When flexie adds css to elements it seems to completely replace any existing inline styles.

Boxes gain height in some cases when content added in IE

Example to clarify :
http://regnix.net/flex/

Fine in FF and Chrome, just IE only tested 7 and 8.

Other than that, excellent work, I wish I knew more JavaScript to fix it myself.

Featured test case not working in IE7/8

The test that is featured on the Flexie homepage ( http://flexiejs.com/test/cases/ie7nomore.com/ ) doesn't seem to be working in IE7 or IE8 but surprisingly, it works in IE6.

Here's a screenshot from Adobe Browser Lab: http://cl.ly/7qGy

Crashes IE9 and almost completely freezes computer

Not sure if it requires a specific set of circumstances to do this, but I am happy to demonstrate a layout to you that pretty much causes IE9 to fall over dead while trying very hard to convince the rest of Windows 7 (64 bit) to do the same. Is IE9 compatibility a known problem?

Sizzle engine doesn't work

Using the latest jQuery (1.7.1) works, but using the standalone Sizzle engine doesn't. Not changing any code other than swapping out jQuery for Sizzle, it will go from working to not working.

flexie demo

To test the demo I just opened the demo index.html-file locally.
This works of course in chrome and firefox, but doesn't work in opera or ie.
There is no replacement performed.

Am I doing something wrong?

I testetd:

75a4258 (1.0.3) and 5661b1c.

Thanks
Michael

not detected RTL direction

hello dear.
flexie can't detect page direction [RTL/LTR].
when page direction is RTL , value of box-pack must be set 'end'

comparison against 135?

Hi,

i went through your code to extract the flexboxSupport method and wondered if I missed something with line 1830

            boxPackJustify : function () {
                var totalOffset = 0,
                    i, j;

                for (i = 0, j = dummy.childNodes.length; i < j; i++) {
                    totalOffset += dummy.childNodes[i].offsetLeft;
                }

                return (totalOffset === 135);

I just get 100 (or, in chrome, 99) as totalOffset when debugging via console.

Perhaps I missed the correct attributes to check justify properly so 135 would be indeed the returned value if the test is passed?

IE8 Null Object Error

Thanks for the awesome library!

IE8 on Windows XP reports the following error with 0.4 and the same CSS in Issue 1

Line: 402
Error: 'property' is null or not an object

firefox + box-flex + fixed position

Firefox seems to implement flex-box differently to chrome and it breaks when you use it with fixed or absolute positioning. Is there a workaround for this?

Javascript error when used with media queries

I get the following javascript error when using flexie.js with inline media queries:

Uncaught Syntax error, unrecognized expression: (min-width:768px) {

This is the media query css

@media only screen and (min-width: 768px) {
  /* flex box css here */
}

Works great without media queries though.