W3C home > Mailing lists > Public > www-style@w3.org > April 2009

Re: [CSS3] Flexible Flow Module, proposal.

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Sun, 12 Apr 2009 19:09:26 -0700
Message-ID: <49E29ED6.4060709@terrainformatica.com>
To: robert@ocallahan.org
CC: David Hyatt <hyatt@apple.com>, www-style <www-style@w3.org>
Robert O'Callahan wrote:
> On Mon, Apr 13, 2009 at 12:44 PM, Andrew Fedoniouk 
> <news@terrainformatica.com <mailto:news@terrainformatica.com>> wrote:
> 
>     How this
> 
>     #A { width: 200px; box-flex: 1; }
> 
>     is different from this:
> 
>     #A { min-width: 200px; width:1*; }
> 
>     ?
> 
> 
> I thought my example was pretty clear already. But anyway, compare
> #A { width: 200px; box-flex: 1; }
> #B { width: 100px; box-flex: 1; }
> to
> #A { min-width: 200px; width:1*; }
> #B { min-width: 100px; width:1*; }
> in a container of width 400px. In the box-flex case, A and B get widths 
> 250px and 150px. In the width:1* case, A and B both get width 200px.

Got it, thanks.

But why do you need that box-flex there?

As far as I understand that is the case for the calc() then:

#A { width: calc(200px + (100% - 300px) / 2); }
#B { width: calc(100px + (100% - 300px) / 2); }

Flexes are needed when you want to take intrinsic widths or min/max 
constraints into account.

In your expression:

#A { width: 200px; box-flex: 1; }

the width defines something that is really different from meaning of the
width in CSS and this really what caused problems in understanding it
on my side. I suspect that I am not alone.

-- 
Andrew Fedoniouk.

http://terrainformatica.com
Received on Monday, 13 April 2009 02:10:02 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:46:58 GMT