Re: Holy grail layout using Flexbox

On Tue, Mar 26, 2013 at 11:38 PM, Mark <markg85@gmail.com> 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?
>
> You can find the HTML/CSS here: http://jsfiddle.net/nBvVD/
> An image of how it looks when i test it:
> http://ompldr.org/vaHc2aQ/holy_grail_layout_using_flexbox.png
> The browser version i used for that screenshot: Chrome 26.0.1410.43
>
> Cheers,
> Mark

+note The spec i used for reference was: http://www.w3.org/TR/css3-flexbox/

Received on Tuesday, 26 March 2013 22:41:09 UTC