Re: [css3-flexbox] Argh, architectural problems

Hello,

Here are two use case I can think of about the flex-box model (I do not deal
here with box ordering which is a key feature but pretty well defined right
now in the flex box model... except for the text selecting order but that's
not the subject here).

1 - Auto adjust form width

HTML :

<div>
   <input type="text">
   <input type="button" value="click me">
</div>

CSS :
div{ width : 200px; }
input[type=text]{ flex-box : 1; }

That way, the text field always have the size of the remaining space inside
the div, whatever the size of the button (which is not necessarily
predictable if you internationalize the "click me" string)


2 - Having sticky header and sticky footer

HTML :

<body>
   <header></header>
   <div id="content"></div>
   <footer></footer>
</body>

CSS :
html, body{ height : 100%; margin : 0; padding : 0;}
#content{ flex-box : 1; overflow : auto; }

That way, the header is stick on top and the footer is stick at the bottom
whatever their height and the content will get the whole remaining height
with a nice overflow if necessary (doing this with position:fixed has some
accessibility issue). If you can predict the height of the header and the
footer, calc() is fine here, but if you have to deal with dynamic content
which made their height unpredictable the flex box model solve the problem
nicely.


Cheers
-- 
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>

Received on Sunday, 23 January 2011 12:00:06 UTC