Re: [css3-flexbox] stretching items, fixed spacing

On Tue, Oct 9, 2012 at 9:55 PM, Giuseppe Bilotta
<giuseppe.bilotta@gmail.com> wrote:
> 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?

I assume by "fixed spacing" you mean a definite length, not just
"equal spacing"?  If so, there's no direct way to achieve this.

If you're okay with spacing like what space-around gives you
(half-spacing on edges, full-spacing between items), just give all of
your items margins equal to half the spacing you want.  Flex item
margins don't ever collapse, so they'll combine into a full-width
space.  (You can also get full-spacing on edges too if you want, by
using padding on the flex container.)

If you just want equal spacing, you can set justify-content to
'space-between', but that won't help with spacing between lines.

More powerful controls over the packing spaces will likely show up in
Flexbox level 2.

~TJ

Received on Tuesday, 16 October 2012 18:52:46 UTC