Re: Flexbox Draft, with pictures!

On Wed, May 26, 2010 at 10:07 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> On May 25, 2010, at 10:14 PM, Brad Kemper wrote:
>
>>> Regardless, I think additive flexing vs. replacement flexing is a key distinction here, and it would be good to make both easy to specify.  Having to do width: calc(fit-to-content + 1fl) just to do the former seems gross.
>>
>> Why not this:
>>
>> 'width:1fl;  min-width: fit-to-content;'
>
> So, I'll be the first to admit I might be missing something. Is there any reason why it can't be this simple, instead of having to employ 'calc()'?

Basically, I think the distinction between a "minimum size" (the
length *cannot* shrink below this) and "preferred size" (the length
starts here, and can then grow or shrink based on available space) is
valuable to preserve.  I definitely think that we don't want
"min-width" to mean something other than "the minimum width of the
box".

Based on a short discussion with dhyatt, though, I think I agree that
we should make the most common additive-flex case easy, where the
preferred size is the fit-content size.  I suggest a second flex unit
which operates similarly to how the current draft of flexbox does
flexes.

That is, to reproduce the following from the current draft:

<div display:box>
  <div box-flex:1>foo</div>
  <div box-flex:2>foo foo foo foo</div>
</div>

You could write this:

<div display:flex>
  <div width:1fla>foo</div>
  <div width:2fla>foo foo foo foo</div>
</div>

(I'm using "fla" as the unit name - that's very much up in the air!)

If used on width or height, 1fla is equivalent to calc(fit-content +
1fl).  If used on padding, margin, or border, 1fla is equivalent to
1fl.  Explicitly setting the preferred size to something other than
the intrinsic size of the element still uses the calc() syntax,
because that's a much less common case.

~TJ

Received on Wednesday, 26 May 2010 18:46:24 UTC