Working with the Flexible Box Layout Module (CSS3)

One of the most common reasons I see tables used for layout (in otherwise properly developed sites) is the need for a flexible box sizing method. Table cells can stretch in either direction to accommodate the size of the content around them, and even align their content vertically.   This, sadly, has long been unavailable to a semantic, well structured layout. Until now.

Both Gecko (Firefox, Flock) and Webkit (Chrome, Safari) have strong, though unfinished implementations of the Flexible Box Layout Module (we’ll call it FBL) allowing you to size any block-level element relative to that of both it’s parent and it’s siblings. It’s worth noting that the new FBL in CSS 3 does not supersede the existing box model from CSS 2.1 but rather extends it.

In this new 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. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

http://www.w3.org/TR/css3-flexbox/

Th entire FBL module is expansive, so for now we’re just focusing on the basics,; a simple structure for the examples consisting of a parent div and three child div , and the properties display, box-align, box-orient, and box-flex.

The properties

display where ‘box’ is the new value from FBL that must be present on the parent of any flexible children.

box-align accepts the values ‘start’, ‘end’ ‘center’, ‘baseline’ and ‘stretch’. Each of these values defines the elements orientation relative to it’s parent. So with ‘center’ all the child div would start in the center and move out.

box-orient needs no explanation, but refer to the spec with this, and anything else, if confused.

box-flex controls whether the element is flexible or not. A value of ’0′ creates an inflexible box (and is the default value), while all other integers enable flexibility, and are relative to their siblings. This relativity means a box with a box-flex value of 2 is twice as flexible as a box with box-flex set to 1. For example, on a 120px container having three children with box-flex values of ’0′, ’1′, and ’2′ where their default width is 30px, the second child (value ’1′) would expand to 40px and the third child (value ’2′) would expand to 50px, thus filling the container. The first child, of course, would not change size as it’s set to inflexible (value ’0′).

Making sense so far? Cool, let’s get on with some examples.

I’ve included ten examples in the example, and I’ll embed one here for example. To try out the rest simply ‘View Source’, everything is clearly marked, commented, and ID’d.

The markup is identical for every example, save the ID. Content only varies by adding a additional number or < br /> for visual effect (please don’t use < br />‘s for layout in real world applications).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<h2>Example Three</h2>
	<div class="container" id="example3">
 
		<div class="child child1">
			1
		</div>
 
		<div class="child child2">
			2
		</div>
 
		<div class="child child3">
			3
		</div>
 
	</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

		#example3 .child1{
			-moz-box-flex: 0;
			-webkit-box-flex: 0;
			box-flex: 0;
		}
 
		#example3 .child2{
			-moz-box-flex: 1;
			-webkit-box-flex: 1;
			-box-flex: 1;
		}
 
		#example3 .child3{
			-moz-box-flex: 2;
			-webkit-box-flex: 2;
			box-flex: 2;
		}

In this example the first .child is inflexible while .child2 has a box-flex value of 1 while .child3 has a box-flex value of 2 making it more flexible than .child2.

This is Webkit and Gecko based browsers only, it won’t work in IE or Opera.

You can view the examples here or download the project files here.