-
200908 Oct
Posted in CSS3 Previews, Modules
One aspect of CSS3 that hasn’t received a lot of attention so far is the Flexible Box Layout module. Already implemented in the Gecko and WebKit engines, in this alternative box model:
“… the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand.”
It’s probably easier if I show you how this works. NB: you’ll need to be using Firefox, Safari or Chrome (or a variant thereof) to see the demos; and if you’re reading this in a feed reader, you’ll need to visit the original post to see them.
Update: It’s been pointed out in the comments that Gecko & WebKit display these demos differently. I’ll look into why that’s happening, but the demos still correctly illustrate the examples I’m providing.
First of all, here’s a containing
div
with two children laid out in the standard model (I’ve added a background image on the container for clarity):Using the flexible box model it’s easy to distribute those two children equally inside the container:
And here’s the code I used for that:
.container { display: box; box-align: stretch; box-orient: vertical; } .container div { box-flex: 1; }
NB: In fact I need
-moz-
and-webkit-
prefixes for all of these, but I’ve left them out for clarity.So what I’ve done here is set the
display
to the newbox
value, told it to stretch vertically—that is, to the top and bottom—inside the container, and set thebox-flex
value to 1 to indicate that it should be flexible (0 means no flexibility, but higher values are also possible; more on that shortly).By changing the
box-orient
value, I can easily make them flex and stretch horizontally:.container { box-orient: horizontal; }
Giving both of the children the same
box-flex
value means that the unused space will be distributed evenly between them; however, you can also provide different values to create a distribution ratio:In this example I gave the first child a value of 2 and the second a value of 1, meaning the unused space was distributed 2:1 in favour of the first child:
.child-one { box-flex: 2; } .child-two { box-flex: 1; }
You can also distribute elements evenly both horizontally and—finally!—vertically, by nesting horizontal and vertical containers, and using the
box-align
andbox-pack
properties:.container { box-pack: center; } .container .container { box-align: center; } .container div { box-flex: 0; }
The module has many more properties for even more flexibility – this article is only a brief introduction.
The spec is currently only a working draft, but it looks as if the implementations are already pretty stable so I hope that it moves swiftly to become a recommendation.
I owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to me.
Read more articles like this on my blog, Broken Links.
You can skip to the end and leave a response.
-
Comments
-
01.
Introducing the Flexible Box Layout module | Broken Links says:Comment » October 8th, 2009 at 1:03 am
[…] got a new post up at CSS3.info: Introducing the Flexible Box Layout module. It’s an overview of an alternative layout module which is already implemented in Gecko […]
-
02.
Tweets that mention Introducing the Flexible Box Layout module - CSS3 . Info -- Topsy.com says:Comment » October 8th, 2009 at 2:10 am
[…] This post was mentioned on Twitter by David Streck and css3watcher. css3watcher said: RT @css3: New Blog Post – Introducing the Flexible Box Layout module http://bit.ly/1uvEf – #CSS3 – CSS3.info […]
-
03.
Wow, impressive stuff. Thanks for bringing it to our attention!
-
04.
Changaco says:Comment » October 8th, 2009 at 10:17 am
I think that’s pretty useless, all of this should be done by positioning the children relatively to their parent using percentages. Clearly not KISS in my opinion.
- 05.
-
06.
Wow this looks very interesting, thanks for writing about it!
-
07.
David says:Comment » October 8th, 2009 at 11:20 am
Please be specific about what browser versions to use.
I get inconsistent layouts between Firefox and Safari (latest stable versions for windows).With such inconsistencies (and the prefixes), why do you advertise this module now ?
-
08.
“I get inconsistent layouts between Firefox and Safari (latest stable versions for windows).” – You’re right, I’ll look into why that’s happening.
“With such inconsistencies (and the prefixes), why do you advertise this module now?” – Part of the (unwritten) brief of this site is to highlight immature specs and new proposals so that developers can begin experimenting with them and hopefully provide useful feedback to the authors.
I’d never tell you to start using this on a production site, but by experimenting now you can stay ahead of the curve when (if) the spec becomes a recommendation.
-
09.
[…] CSS3 Flexible Box Layout module – Link. […]
-
10.
Looks like a good candidate for creating equal height layouts without needing to use display: table etc.?
-
11.
Exactly Peter, experiments whether they’re useful in a production site right now or not are important for many reasons. Two I can think of are keeping up on the tech and being aware of what there is to come (and where it’s going). Also would be – trying out new ideas and possibility could reveal new solutions and ideas to problems you can solve now.
-
12.
Andy’s Blog » Equal Height Columns with CSS Flexible Box Layout says:Comment » October 8th, 2009 at 9:10 pm
[…] today published a guide to the Flexible Box Layout, one of the modules of the upcoming CSS3 specification. The Flexible Box Layout provides a way of […]
-
13.
I’ve used the above to create a pure CSS layout that automatically creates equal-sized columns, regardless of the differences in content between them.
http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/
-
14.
There are several interesting things to point out. Regarding the difference with Webkit and Mozilla, Webkit seems to strictly respect the width value on the inner divs when box-orient is vertical, and strictly respect the height when box-orient is horizontal. Not sure if this is a bug or not (haven’t gone thoroughly over the spec).
Also, regarding your example with the 2:1 box flex values, it’s important to note that the result “almost” displays 2:1 – that is why it looks a little “off” and the ratio doesn’t display on the dividing line. In this case, both engines respect the width value, and the box-flex ratio is applied to the width values themselves of the inner divs. In this case, one div becomes 40px wide and the second becomes 20px wide. that adds up to 60px, and an extra 60px is added to each div to accommodate an equal stretch to fill its container, making each div 100px and 80px respectively. I initially would have expected the divs to be 120px and 60px (2:1), but the result above makes sense. You can achieve a true 2:1 split by assign width: auto to each.
-
15.
@Charles: I took a look at the spec to see which was correct, but the language made my head spin and I couldn’t decide one way or another!
As for the box flex, I should have made clearer that the original values are respected and it is the empty space between them that is distributed 2:1.
-
16.
Thanks for the article update, and for putting out these excellent demos in the first place!
Took a quick look at the spec. From what it says here – http://www.w3.org/TR/css3-flexbox/#alignment – it seems that Webkit is getting it right.
From the spec:
“All normal flow children of boxes will attempt to satisfy the following sizing equation when placed inside vertical boxes if and only if at least one of the specified values is auto:
‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing box
and a similar equation for height when placed inside horizontal boxes:
‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ = height of containing box
If all the values in the equation are specified (i.e., if there are no auto values), then the equation above does not apply, and the specified values should be used. If applying the equation results in a negative value for width/height, then that value is set to 0, and those values should be used.
If the value of ‘box-align’ is stretch, then elements obey the sizing rules specified above.”Basically, it should stretch if the margin, padding, or width (or height, depending on orientation) is auto. If not, it should respect the value that was specified.
-
17.
CyberSkull says:Comment » October 10th, 2009 at 2:56 am
This looks wonderful, I need to set aside an an afternoon to really sink my teeth in this module.
-
18.
88 liens sur Wordpress, jQuery, typographie, CSS, webdesign … says:Comment » October 10th, 2009 at 6:49 pm
[…] Introducing the Flexible Box Layout module – CSS3 . Info Initiation aux FlexBox en CSS3 (modèle de boites évolué) […]
-
19.
[…] von der Designfront: Das Flexible Box Modell. Das könnte auch mein eigenes Layout revolutionieren. Nix mehr mit float und magrin und Tod und […]
-
20.
Note that the implementation into Gecko (the engine of Firefox, used in Netscape 6 etc) has been done years ago, (before Netscape 6 !). The flexible Box Layout is used for the XUL language (language created to develop the user interface)
-
21.
Ah I see. Hopefully they can put a fix for this in Firefox 3.6? Thanks for the correction with the Mozilla/Gecko reference – I should’ve been referring to Gecko (was rushing to get my comment out!).
-
22.
GuyTouch » 88 lien pour Worpress, jquery, javascript, tout pour le web says:Comment » October 13th, 2009 at 12:12 pm
[…] Introducing the Flexible Box Layout module – CSS3 . Info Initiation aux FlexBox en CSS3 (modèle de boites évolué) […]
-
23.
Good stuff, but part of me wonders if CSS tables will take off before this, but I’m sure it will still come in handy.
-
24.
[…] capire ancora meglio la dinamica di questo modulo, gli esempi che trovate su css3.info sono meglio di qualsiasi descrizione testuale, a patto che stiate utilizzando le ultime versioni di […]
-
25.
[…] Introducing the Flexible Box Layout module – CSS3 . Info […]
-
26.
Ant says:Comment » October 17th, 2009 at 12:24 am
Seems that Firefox box working better, than webkit: when you set fixed height or padding for one of boxes, and leave it for another, in Webkit content is overflows throught second box, when not enough space; Firefox stretches it.
If webkit fix this issue, this method may be used for sticky footer with undefined(!) height.
-
27.
Lurky McLurkey says:Comment » October 17th, 2009 at 4:52 am
display: box + width + margin: auto to center doesn’t seem to work.
It’s not content order independant. The left column must still come before the center column in source
-
28.
[…] в резиновой верстке учтена — спецификация Flexible Box Layout Module все еще находится в состоянии черновика, однако […]
-
29.
[…] Introduction to flexible box layout […]
-
30.
Interesting. I’d really like to see such ideas being more implemented with Adobe softwares so we could just grab and place in proper alignment and boxlayouts…would be so much easier for designers struggling with coding. Would like to see more interface based web designing softwares
-
31.
Flexible Box in css3! will it work one day in IE? jaajajajajaj i think it’ll be the same that ie6 GRRRRRR
Paul (made in France :)
-
32.
Robbie van Doorn says:Comment » February 25th, 2010 at 5:22 pm
I've been looking for something like this for a long time.
There seems to be a problem with overflow in Firefox (3.6).
I have container and a few inflexible childs and 1 flexible child that recieves all the available space. It stretches fine, but when it shrinks and there isn't enough room for the content it overflows the container div. overflow auto works in chrome but adding does nothing in firefox. -
33.
The CSS 3 Flexible Box Model ✩ Mozilla Hacks – the Web developer blog says:Comment » April 22nd, 2010 at 6:43 pm
[…] CSS3.info: Introducing the flexible box layout module […]
-
34.
[…] CSS3.info: Introducing the flexible box layout module […]
-
35.
[…] CSS3.info: Introducing the flexible box layout module […]
-
36.
@Ant Interesting idea, I hadn’t considered using it for that.
Also, seems to be a bug in FF 3.5 when trying to use box-flex alongside position absolute.
Basically, I’m trying to absolutely position an element relative to one of the flexible divs, but it only seems to work correctly in FF 3.6. Here’s a test example:
http://meta-graphical.com/tests/box-flex.html
Div number 3 is always containing div number 4 in FF 3.5 despite it being absolutely positioned. Can’t figure out a fix for this at all.
Matt
-
37.
How-To: Full Page CSS 3 Layout (Desktop) « Appcelerator Developer Center says:Comment » June 10th, 2010 at 7:29 pm
[…] Today we’ll take a look at how to employ CSS 3 Box Layouts- check out some brief tutorials here and here. Using a few lines of CSS, we can create a flexible fullscreen layout that automatically […]
-
38.
Equal Height Columns with CSS Flexible Box Layout | Andy Leon says:Comment » July 3rd, 2010 at 1:04 pm
[…] today published a guide to the Flexible Box Layout, one of the modules of the upcoming CSS3 specification. The Flexible Box Layout provides a way of […]
-
39.
http://siteexplorer.search.yahoo.com
- 40.
- 41.
-
42.
W3C Issues Updated Working Drafts for CSS3 Flexible Box Layout and CSS3 Fonts Modules - CSS3 . Info says:Comment » April 4th, 2011 at 5:59 pm
[…] CSS3 Flexible Box Layout module, first introduced in July 2009, has been almost completely re-written in this latest update to the specification. According to the […]
-
43.
In regards to this being a redundant item, I completely disagree. There are plenty of situations where you need to restructure your XML layout just so you can format it properly. There have been many times where I had to complicate the structure of the content just for the visual elements to appear properly. This option will allow for the same types of designs without having to add extra containers for relative percentages, etc.
-
44.
Microsoft presenta una preview de Internet Explorer 10 — Bitelia says:Comment » April 12th, 2011 at 7:57 pm
[…] del navegador de Microsoft como, por ejemplo, el soporte para estándares web como CSS Gradients y CSS3 Flexible Box Layout, o mejoras en el rendimiento del navegador. De hecho, para demostrar esta mejora del rendimiento, […]
-
45.
Microsoft presenta una preview de Internet Explorer 10 at BytNews says:Comment » April 12th, 2011 at 8:30 pm
[…] del navegador de Microsoft como, por ejemplo, el soporte para estándares web como CSS Gradients y CSS3 Flexible Box Layout, o mejoras en el rendimiento del navegador. De hecho, para demostrar esta mejora del rendimiento, […]
-
46.
[…] del navegador de Microsoft como, por ejemplo, el soporte para estándares web como CSS Gradients y CSS3 Flexible Box Layout, o mejoras en el rendimiento del navegador. De hecho, para demostrar esta mejora del rendimiento, […]
-
47.
Lanzada la primera Platform Preview de Internet Explorer 10 — ALT1040 says:Comment » April 13th, 2011 at 2:30 am
[…] Explorer 9 con HTML5 y CSS3 —soporte de transiciones 2D y 3D y otros estándares como CSS3 Flexible Box Layout— y la aceleración por hardware mejora sustancialmente con lo que el rendimiento del […]
-
48.
Lanzada la primera Platform Preview de Internet Explorer 10 | Linkeando says:Comment » April 13th, 2011 at 8:02 am
[…] Internet Explorer 9 con HTML5 y CSS3 —soporte de transiciones 2D y 3D y otros estándares como CSS3 Flexible Box Layout— y la aceleración por hardware mejora sustancialmente con lo que el rendimiento del navegador […]
-
49.
[…] Internet Explorer 9 con HTML5 y CSS3 —soporte de transiciones 2D y 3D y otros estándares como CSS3 Flexible Box Layout— y la aceleración porhardware mejora sustancialmente con lo que el rendimiento del navegador […]
-
50.
Microsoft presenta una preview de Internet Explorer 10 | Dynamyza.com says:Comment » April 14th, 2011 at 11:10 am
[…] del navegador de Microsoft como, por ejemplo, el soporte para estándares web como CSS Gradients y CSS3 Flexible Box Layout, o mejoras en el rendimiento del navegador. De hecho, para demostrar esta mejora del rendimiento, […]
-
01.