Re: Holy grail layout using Flexbox

On 03/26/2013 03:38 PM, Mark wrote:
> Hi,
>
> I'm playing with flexbox under chrome in an attempt to see how easy it
> is to get the "holy grail layout" working. For those that don't know,
> the holy grail layout is (as far as i understand it) a layout with:
> - 1 Header
> - 1 Footer
> - 2 or 3 columns
> By default it shows at 100% if there is too little to bring it at 100%
> once the content is bigger then the 100% it stretches. So the footer
> moves down and the content stretches (the columns).
>
> The HTML/CSS that i made shows is a near perfect holy grail layout.
> However, i seem to be having some magic white space that doesn't seem
> to be going away. While the align-content is set to stretch.. It seems
> to show as if it where set at space-between. So now i'm wondering if
> this issue is in my HTML or if i just found a bug in the webkit
> rendering for the flexbox spec?

I think what's happening is that the flex lines are stretching,
but since the footer and the header are not stretchable, they
don't stretch to fit their line: the line just stretches and
leaves white space.

To make this layout in Flexbox you need to put a wrapper around
<nav> and #content. Make that a row flexbox inside a column flexbox.

~fantasai

Received on Tuesday, 26 March 2013 23:57:23 UTC