The layout

Let's say I have a moderately complex site that I want to create on the web. My mockups are all ready, and I've identified the skeleton of the site:

This diagram is drawn from an actual site that I am looking at to make sure my requirements are sane when I start hacking on the layout specs. Each labelled section is a distinct part of the page.

The Flexbox Approach

If I was designing this layout with flexbox, I'd end up with a page structure looking like this:

("vbox" and "hbox" are container elements with display:box and an appropriate box-align value.)

<vbox>
	<hbox>
		<a/>
		<vbox>
			<b/>
			<c/>
		</vbox>
	</hbox>
	<hbox>
		<d/>
		<vbox>
			<hbox>
				<@/>
				<e/>
			</hbox>
			<f/>
		</vbox>
	</hbox>
</vbox>

Personally, I think this is relatively horrifying all by itself. The page layout is relatively complex, but this super-nested design is just... just... ugly. And while I might be able to use existing elements in my page for some of those vboxes and hboxes, I'll still have a ton of container elements that serve no purpose beyond making the layout work. <div>itis!

Here's where it gets worse, though. Say I change the layout slightly. Rather than the D block extending to the bottom of the screen, I go with a more traditional 3-column layout in the center, and just let the footer fill the entire bottom. In terms of visual change, all that happens is the lower-left corner of the layout now belongs to F rather than D. What happens?

CHAOS!

Suddenly, I have a relatively drastic rearranging of my markup:

<vbox>
	<hbox>
		<a/>
		<vbox>
			<b/>
			<c/>
		</vbox>
	</hbox>
	<hbox>
		<d/>
		<@/>
		<e/>
	</hbox>
	<f/>
</vbox>

While this layout is simpler than the prior one, it's still a bit overly complex and will require meaningless container elements to make the layout work. More importantly, though, it's significantly different from the previous layout, even though almost nothing changed!

(To be fair, it could be a relatively small change, if I'm willing to retain the now-useless vbox and hbox wrapping the @ and E blocks. But it's pretty obvious that the structure above is precisely what you'd produce if you were coding this from scratch, and so if you happened to make the change in the opposite direction the large change would be required.)

Flexbox seems fundamentally vulnerable to this. It can only deal with one-dimensional flows of elements, so certain types of layout changes that break from those simple notions can create a cascade of changes as you suddenly need to nest multiple flexboxes that are only positioning two or three elements.

The Template Approach

With Template Layout you're saved from this. To start with, here's the extra structure you need:

(this space intentionally left almost blank)

This is because the layout is expressed in pure CSS, not in the page structure. Here's the CSS for the original layout:

body {
	display: "abb"
	         "acc"
	         "d@e"
	         "dff";
}

#logo { position: a; }
#header { position: b; }
(etc.)

Notice the eery similarities between the display property and the original file...

Now, here's what the CSS looks like if we make the change in how blocks D and F sit:

body {
	display: "abb"
	         "acc"
	         "d@e"
	         "fff";
}

#logo { position: a; }
#header { position: b; }
(etc.)

(In case you missed it, a single character changed.)

Conclusion

Flexboxes are great for a lot of things, and I think I'm going to be powering them up a little to make them even better, but they are not the correct solution for page layout. Template Layout is.