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, 20 Apr 2011 19:43:01 -0700
Message-ID: <BLU159-ds172CF808C569B9188BB4C8F8920@phx.gbl>
To: "Alex Mogilevsky" <alexmog@microsoft.com>, "Brad Kemper" <brad.kemper@gmail.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style list" <www-style@w3.org>

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

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