CSS vertical layout with flexible box model

[edA-qa mort-ora-y]

I'm having some trouble doing a vertical layout with flexible box model,
something that seems like it should be easy. Basically all I want is:

* Header (constant, but unknown size)
* Body (stretch to fill)
* Footer (constant, but unknown size)

The constant sizes will be based on whatever content is in those areas.
The entire display will stretch to fill the window (and support user
resizing of that window).

How do I achieve this?

[edA-qa mort-ora-y]

On 10/18/2012 08:50 AM, edA-qa mort-ora-y wrote:
> * Header (constant, but unknown size)
> * Body (stretch to fill)
> * Footer (constant, but unknown size)

I have a layout working in the older box model, but can't figure out how
to get this working in the new flex model (using Nightly 19.01a).

[Daniel Holbert]

There are two concepts of "flexbox" -- I'm assuming you're talking about
the older one. For more details, see:
http://css-tricks.com/old-flexbox-and-new-flexbox/

The new-flexbox spec has stabilized relatively recently, and it's only
recently become available in nightly Firefox builds (from our trunk),
and it's turned off by default -- so if you're writing production code
that you need to ship _now_, I wouldn't recommend relying on new-flexbox
quite yet.

You can get the layout your'e talking about in both old-flexbox and
new-flexbox, though. Demos below -- I've tested these in both Firefox
Nightly and Chrome Dev Channel, and they work in both. (For the "new"
flexbox version, you need to be using a Firefox nightly build and toggle
the about:config pref "layout.css.flexbox.enabled")

http://people.mozilla.org/~dholbert/demos/flexbox/old_vs_new/oldflexbox.html

http://people.mozilla.org/~dholbert/demos/flexbox/old_vs_new/newflexbox.html

Cheers,
~Daniel

> _______________________________________________
> dev-tech-layout mailing list
> dev-tec...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-tech-layout

[edA-qa mort-ora-y]

On 10/18/2012 08:17 PM, Daniel Holbert wrote:
> Nightly and Chrome Dev Channel, and they work in both. (For the "new"
> flexbox version, you need to be using a Firefox nightly build and toggle
> the about:config pref "layout.css.flexbox.enabled")

Great, I suppose it was just that missing about:config preference which
prevented my new ones from working. When is it intended to turn this on
by default? I'm actually working with the SocialAPI, so it may be a few
versions anyway before we release.

In the meantime I'll stick with the old way. Will this old way be
supported indefinitely, or will it be removed once the new way is in
place? I'm a bit unclear on the standards, what's replaced what.

[Daniel Holbert]

On 10/19/2012 12:03 AM, edA-qa mort-ora-y wrote:
> On 10/18/2012 08:17 PM, Daniel Holbert wrote:
>> Nightly and Chrome Dev Channel, and they work in both. (For the "new"
>> flexbox version, you need to be using a Firefox nightly build and toggle
>> the about:config pref "layout.css.flexbox.enabled")
>
> Great, I suppose it was just that missing about:config preference which
> prevented my new ones from working. When is it intended to turn this on
> by default?

Probably during this nightly-release-cycle or the next. Subscribe to
https://bugzilla.mozilla.org/show_bug.cgi?id=783409
to see when it happens.

> I'm actually working with the SocialAPI, so it may be a few
> versions anyway before we release.

Awesome! If you do end up using new-flexbox, please do file bugs if
things work oddly or anything. :)

> In the meantime I'll stick with the old way. Will this old way be
> supported indefinitely,

It depends on what you mean by "supported". I suspect it will still
*work* in Gecko for the indefinite future, but we'll probably care less
and less about fixing bugs in it, as things switch over to the new model.

For now, though, much of Firefox's UI depends on old-flexbox, so we're
not about to disable it. :)

> I'm a bit unclear on the standards, what's replaced what.

I'll try to clarify... Basically: old-flexbox ("display: -moz-box") was
what we used before this was standardized, because we needed something.
It's part of XUL. There was a tentative W3C spec written around 2009
about how it should work (long after it was already implemented in Gecko
& Webkit), but that spec ended up getting scrapped in favor of a
written-from-scratch "new-flexbox". ("display: flex")

They're two distinct layout models, with different
properties/keywords/etc, but they largely address the same use-cases,
and they behave similarly at a high level.

~Daniel