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 Thursday, 21 April 2011 02:43:31 UTC