Re: Holy grail layout using Flexbox

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.  ^_^

In other words, if your layout is roughly:

<body>
  <header>header</header>
  <div id=main>
    <aside>sidebar</aside>
    <article>main content</article>
  </div>
  <footer>footer</footer>
</body>

Then the styles you want are:

body {
  display: flex;
  flex-flow: column;
}
#main {
  flex: 1;
  display: flex;
}
article {
  flex: 1;
}

That's all you need for the basic layout.

~TJ

Received on Tuesday, 26 March 2013 22:52:40 UTC