[css3-flexbox] stretching items, fixed spacing

Hello all,

taking advantage of the latest Opera preview release I've recently
started playing with flexbox to try to achieve some effects that
required either CSS tables or horrible media query combinations (often
with unsatisfactory results).

I'm quite amazed at how trivial it is to achieve good results with the
flexbox specifications now, but there's a couple of points that I
would to clarify.

The layout I'm trying to control is like this: I have a
dynamically-sized #container div, and within this I have a navigation
ul (#rubriche) with a given amount of li (the number of entries can
potentially change so I would like the CSS to not depend on this).

The navigation should fill the top of the #container, splitting across
multiple lines if the #container is too short, and flexbox is exactly
what I need for this. However, I'm having troubles achieving this
effect: I would like the items to stretch and fill all the available
space, but I would like them to be equally spaced at a fixed distance
from each other, both along the main and the cross axes.

The ul has margin:0 and width: 100%, and its distance from the
#container border is controlled by the .4rem padding of the
#container. I would like items to be apart fro each other by .4rem
too, so I tried setting #rubriche li { margin-right: .4rem}, and then
#rubriche li:last-of-type {margin-right: 0} so that the last item
would touch the border. This is fine unless the items wrap, of course,
since the margin-right: 0 should go at every
:last-of-type-for-the-line. The same holds for the cross axis, of
course (with margin-bottom).

So the question is: how do I achieve this?

I suspect that a possible solution would be to use a more complex
styling such as #rubriche { margin: -.2em; width: calc(100% +.4em) }
and #rubriche li {margin: .2em }, but this seems unnecessarily
complex, only works fine with certain inner/outer spacing, and it
fails on browsers that support flexbox but not calc (e.g. this Opera
preview). Is there something I'm missing from the flexbox
specification that determines how to give fixed spacing to the items?

-- 
Giuseppe "Oblomov" Bilotta

Received on Wednesday, 10 October 2012 04:56:26 UTC