Re: Holy grail layout using Flexbox

On Tue, Mar 26, 2013 at 3:51 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Tue, Mar 26, 2013 at 3:38 PM, Mark <markg85@gmail.com> wrote:
> > 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?
>
> You're using "flex-flow: row wrap;" to achieve the vertical part of
> the layout.  Instead, use "flex-flow: column;".  You'll find that your
> layout works a lot better that way.  ^_^
>

To explain why your original case didn't work:
The rows are stretching properly and your header has align-self:
flex-start, so the header doesn't stretch to fill the row height.  The
header also has a fixed height of 100px, so it's 100px and the remaining
height in the row is unused.

If you remove your align-self values (so the default of stretch is used
instead) and you use min-height instead of height, you should get the
layout you want.

tony