W3C home > Mailing lists > Public > www-style@w3.org > March 2013

Re: Holy grail layout using Flexbox

From: Tony Chang <tony@chromium.org>
Date: Tue, 26 Mar 2013 16:02:42 -0700
Message-ID: <CAL-=4P2Fu_juuhv35Wq+LQ7+_XJ_8uj3O3DE2dyNpWu7+d1Zig@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: Mark <markg85@gmail.com>, www-style list <www-style@w3.org>
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
Received on Tuesday, 26 March 2013 23:03:11 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 23:03:12 GMT