Re: [css3-flexbox] Trying out flex units again

On Wed, Feb 2, 2011 at 2:14 AM, Jeremie Patonnier
<jeremie.patonnier@gmail.com> wrote:
> Hello,
>
> As a web author, I found your proposal much more understandable and, FWIW,
> somewhat more "intuitive"
>
> Nonetheless, I do not really understand what is the benefit of the flex()
> function.
> In what way is it different than using min-width/min-height and
> max-width/max-height or even the already defined calc() function ?
>
> To me, doing this :
>
> width : flex(200px, 1fl)
>
> Is the same as :
>
> width: 1fl;
> min-width: 200px;
>
> And this :
>
> width : flex(200px, 0, 1fl);
>
> Looks like :
>
> width : calc(200px - 1fl);
>
> So I can understand the need for fine tunning on flex size but it could be
> better to relay on existing property to handle this.

No, the semantics are different.  The preferred width (the first
argument to flex()) is different from the min width, for good reason.
You may want, for example, two columns to be the same width when
there's enough space (same flexibility, preferred width of 0), but the
left column shouldn't shrink below 200px while the right column
shouldn't shrink below 100px.

If you co-opted min-width to work as the preferred width, you couldn't
do this - the left column would always be 100px larger than the right
width.

It also makes it impossible to specify a preferred width in the
presence of negative flex, as you discovered - you had to switch to
using calc() to specify the preferred width.  That's easily confusing
to authors, plus it

Finally, I think it's useful to have min/max/preferred widths on
margins and maybe padding as well, when you make them flexible.  The
flex() function makes that possible.

This does mean that flex() potentially conflicts with
min/max-width/height, but that's easy to resolve: just honor both
constraints.  In the expected common case, flex() will be called with
just two arguments, so it won't deal with min/max at all.

~TJ

Received on Wednesday, 2 February 2011 16:26:31 UTC