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:

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

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>

<confusion>
What "fixed size (that can change with media queries)"
is about?
</confusion>

More samples anyone?

--
Andrew Fedoniouk

http://terrainformatica.com

Received on Wednesday, 27 April 2011 11:34:59 UTC