Re: [css3-flexbox] flex-grow initial value should be 0px

On 05/30/2012 05:25 PM, Ojan Vafai wrote:
> Alex, I see what you're saying now. I was wrong about the performance impact for row. The performance impact of
> flex-basis:auto *only* applies to column. You need to layout once to get the flex item's height, then flex the height, then
> layout again for any descendants of the flex item that depend on the height (e.g. % heights). It's true that the second layout
> can be cheaper than the first for most cases if you do the right optimizations, but there are legitimate cases where it would
> be expensive.
>
> In a world where you flex by default, I suppose flex-basis:auto is sensible. However, we believe that "flex:0 0 auto" is
> simply what web developers will want and expect for nearly all cases because there will be only a single flexing item in the
> flexbox. In the old scheme of defaulting "flex: 0 0 auto", most UIs would only need to set "flex: 1" on a single item and not
> need to set flex on any other items.
>
> Also, flex-basis:auto is hard to wrap your head around. That was my experience as a web developer writing pages towards the
> old flexbox API and that has been my experience writing test cases for the new flexbox API. flex-basis:auto consistently led
> to surprising layouts.
>
> That all said, we're willing to concede here:
> 1. The performance isn't as bad as we initially thought, although there are still cases where it's quite a bit worse.
> 2. fantasai's original comment that most people will just set "flex:none" or "flex:1" on all the children anyways is
> compelling (i.e. people will effectively get flex-basis:0 because that's what the majority of UIs will want).  However, it
> seems silly to require the majority of pages using flexbox to set "flex:none" on every flex item when all they want is "flex:
> 0 0 auto" for all items except the one item that will flex.

Ok, I'm glad we're in agreement that flex-basis initial value can be 'auto'. :)
So now the issue you're raising is, why is default flexibility 1 instead of zero.
We brought up this change because of a few reasons:

   * Most importantly, having negative flexibility on by default prevents overflow
     in cases where it's not necessary. (Authors don't think about narrow screens;
     with min-content as the default minimum and Alex's new sensible formulation
     for negative flexibility, turning it on by default is better for users.)

   * Secondly, the cross-axis defaults to 'stretch', and turning on positive flex
     is the main-axis equivalent of that, so making it 1 by default matches that
     behavior. A single flex item in a flexbox will by default fill the flexbox
     in both dimensions.

   * It's called Flexbox. Seems reasonable for the items to flex by default. :)

To me, the first item is the most important. I want to avoid overflow, because
it makes the page hard or impossible to read. But I also understand your concerns
about making Flexbox easy to use. No flexibility by default works better with the
other features of flexbox, such as alignment and auto margins, or to have one item
that takes up all the space.

But actually, you only need to turn off positive flexibility to get those use
cases, so a third option is to have 'flex: 0 1 auto' be the initial values.
This would solve your usability concerns for the author, and it would solve my
readability concern for the user. It's only real disadvantage is that it's
inconsistent with cross-axis 'stretch'.

So to summarize, the possibilities are:

   Proposal A: ''flex: none'' (discarded at Hamburg)
      * It's easier to use alignment and auto margins
      * Easier for use cases that want some but not most items flexible,
        e.g. one item takes up all free space
      - Doesn't have negative flexibility be default, which could help
        prevent overflow in many cases
      - Inconsistent with 'stretch' default in cross-dimension

   Proposal B: ''flex: auto'' (adopted at Hamburg)
      + Negative flex is on by default, preventing overflow in many cases
      + Consistent with 'stretch' default in cross-dimension
      - Harder to use alignment and margins, since have to turn off flex first
      - More work for use cases that want most items inflexible

   Proposal C: ''flex: 0 1 auto'' (proposed here)
      + Negative flex is on by default, preventing overflow in many cases
      + Easy to use alignment and auto margins since positive free space is not flexed
      + Easy for use cases where free space is distributed to e.g. only one item
      - Inconsistent with 'stretch' default in cross-dimension

I'm happy with either A or C. Now it's a question of what everyone else thinks. :)
I've loaded this discussion into the wiki at
   https://wiki.csswg.org/topics/flex-initial-value

~fantasai

Received on Thursday, 31 May 2012 05:58:09 UTC