Comments on: CSS3 Flexible Box Model…Layout Coolness…also Oddities & Confusion

By: CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout) | Orkun Altunbay

CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout) | Orkun Altunbay — Sat, 03 Mar 2012 11:41:41 +0000

[...] http://blog.w3conversions.com/2011/02/css3-flexible-box-model-layout-coolness-also-oddities-confusio... [...]

By: CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout) | Grafik Arena

CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout) | Grafik Arena — Tue, 28 Feb 2012 20:12:25 +0000

[...] http://blog.w3conversions.com/2011/02/css3-flexible-box-model-layout-coolness-also-oddities-confusio... [...]

By: Luke

Luke — Wed, 08 Feb 2012 21:28:08 +0000

Apparently if you set an arbitrarily large width (i.e. 9999px) in addition to box-flex it works (going off Tab Atkins’ comment I tried 0 width but that didn’t work but then I tried increasing it and they became even again independent of the content). It seems to work in firefox and chrome/webkit.

By: Weekly Design News – Resources, Tutorials and Freebies (N.99) - WORDPRESS4free | WORDPRESS4free

Wed, 17 Aug 2011 00:15:22 +0000

[...] CSS3 Flexible Box Model…Layout Coolness…also Oddities & Confusion [...]

By: Web Development articles, tutorials, help » Blog Archive » Weekly Design News – Resources, Tutorials and Freebies (N.99)

Tue, 16 Aug 2011 12:10:35 +0000

[...] CSS3 Flexible Box Model…Layout Coolness…also Oddities & Confusion [...]

By: Weekly Design News – Resources, Tutorials and Freebies (N.99)

Weekly Design News – Resources, Tutorials and Freebies (N.99) — Tue, 16 Aug 2011 08:14:26 +0000

[...] A Visual History of Design ToolsThe Definitive Guide To Forms based Website AuthenticationCSS3 Flexible Box Model…Layout Coolness…also Oddities & ConfusionInvaluable Command Line Tools for Web DevelopersPressWork – An HTML5 WordPress [...]

By: Ben Halhead

Ben Halhead — Tue, 05 Jul 2011 16:33:44 +0000

One real issue with the flexible box model as it currently stands is how Firefox deals with widths defined in percentages. It appears that if child elements widths are defined as a percentage and the parent container is given the ‘display:box;’ attribute, the width attribute is simply ignored on the children. Setting the ‘box-flex’ attribute to 0 or 1 has no effect at all. Chrome and Safari work as desired either if the width of the child element is set to ’0′ and ‘box-flex’ is 1 or the width is ’50%’ regardless of the value of ‘box-flex’. For this reason, at this time, the flexible box model is just not practical to use on a site that needs to work across all major browsers.

By: theredled

theredled — Tue, 17 May 2011 14:22:20 +0000

> Based on Zoe’s comment, I did a few more tests. If widths are given
> to all boxes and then box-flex is added to one (or more), the dividing
> of space between the boxes is reliable

That doesn’t work perfectly. If you try this trick on your “varied content” example, by adding {width: 0} to .hbox div, you’ll notice that the first column is still larger than its siblings. Better, but still not reliable.

By: Zoe Gillenwater

Zoe Gillenwater — Fri, 25 Feb 2011 20:15:47 +0000

The changes sound really good. The current behavior of flexbox definitely has its uses, but not nearly as many (in my work, anyway) as the more intuitive behavior of making widths relative to each other, rather than making additions/subtractions from inherent width relative to each other.

The preview versions of IE 9 have support for flexbox (or the one I last checked did) with the -ms prefix, but it has never made it into the beta. Sounds like this is a good thing with all the changes on the horizon.

By: Stephanie (Sullivan) Rewis

Stephanie (Sullivan) Rewis — Fri, 25 Feb 2011 19:29:30 +0000

Tab, you don’t know how happy you just made me.