- From: Alex Mogilevsky <alexmog@microsoft.com>
- Date: Wed, 20 Apr 2011 09:21:27 +0000
- To: 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>
> -----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) }
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) }
Alex
Received on Wednesday, 20 April 2011 09:21:57 UTC