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

Re: [css3-flexbox] Best way to denote flexible lengths

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Wed, 27 Apr 2011 09:07:26 -0700
Message-ID: <BLU159-ds12004A2F5176C96F25925EF8980@phx.gbl>
To: "Alex Mogilevsky" <alexmog@microsoft.com>, "Andrew Fedoniouk" <news@terrainformatica.com>, "Brad Kemper" <brad.kemper@gmail.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style list" <www-style@w3.org>
"Then the units can be simply 'fl' and 'fr'..."

If not '*' (as weight multiplier) then 'fx' will be better - more
distinguishable in modern fonts.  '1fl' looks just weird.

'*' as a unit has also an advantage to be used alone -
without need of any number (implicit 1 multiplier). So
is exactly
And this is compatible with existing flex units cases like:
  <frameset cols="200,*">
Two columns: one fixed 200px and one flexible taking the rest.

Practice shows that web developers understand '*' units without
any additional explanation.

Andrew Fedoniouk


-----Original Message----- 
From: Alex Mogilevsky
Sent: Wednesday, April 27, 2011 4:34 AM
To: Andrew Fedoniouk ; Brad Kemper ; Tab Atkins Jr.
Cc: www-style list
Subject: RE: [css3-flexbox] Best way to denote flexible lengths

Actually there is a point in questioning negative flexibility. It seems 
useful (as a match to TEX layout, and an equivalent of 2007 spec). But I 
have not seen really compelling use cases so far that can't be done exactly 
same (or good enough) without ever having negative flex.

Tab, can you think of what would be a really strong reason for negative 
flex? What if it didn't exist at all? Then the units can be simply 'fl' and 
'fr'... simple is a big advantage...

-----Original Message-----
From: Andrew Fedoniouk [mailto:andrew.fedoniouk@live.com]
Sent: Thursday, April 21, 2011 6:43 AM
To: Alex Mogilevsky; Brad Kemper; Tab Atkins Jr.
Cc: www-style list
Subject: Re: [css3-flexbox] Best way to denote flexible lengths

>-----Original Message-----
>From: Alex Mogilevsky
>Sent: Wednesday, April 20, 2011 2:21 AM
>To: Andrew Fedoniouk ; Brad Kemper ; Tab Atkins Jr.
>Cc: www-style list
>Subject: RE: [css3-flexbox] Best way to denote flexible lengths
>> -----Original Message-----
>> From: Andrew Fedoniouk [mailto:andrew.fedoniouk@live.com]
>> Sent: Friday, April 15, 2011 7:55 PM
>> I've asked couple of times to provide practical examples for negative
>> flexes (a.k.a. base relative flexes).
>OK, let me try a couple of examples
>1) your flexbox has two items: navigation pane and content.
>Navigation doesn't change but content can have a lot of text, so you if
>there is more space you want to give it all to content. However if you
>are out of space, you want naivigation to shrink too (maybe even faster
>than content shrinks), to leave more space for text. Then the style
>could be like this:
>#nav     { width:flex(0 2 auto) }
>#content { width:flex(1 1 auto) }

That is usually made simply as

#nav     { width:1*; max-width: 200px; }
#content { width:2*; }

Two "springs", one of strength 1 another of 2. If enough space provided #nav 
will hit max-width: 200px; cap and the rest will be taken by #content.
If not enough space then distribution of widths will be 1:2.

>2) you have a picture with a caption. The picture can grow and shrink
>indefinitely, but the caption is text of fixed size (that can change
>with media queries, but only in discreet steps). You will want to allow
>negative flex for picture but not for caption:
>.picture { height:flex(1 1 auto) }
>.caption { height:flex(0.5 0 auto) }

It is not clear what you mean here.

I assume that markup looks like this:

  <picture />
  <caption>some text</caption>

and styles are:

figure { display:block; flow:vertical; } figure > picture { height:*; 
min-height:YYpx; } figure > caption { height:auto; }

So picture gets the rest of height left in <figure> from </caption>

What "fixed size (that can change with media queries)"
is about?

More samples anyone?

Andrew Fedoniouk

Received on Wednesday, 27 April 2011 16:07:57 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:45 UTC