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

On Tue, Oct 16, 2012 at 8:51 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Tue, Oct 9, 2012 at 9:55 PM, Giuseppe Bilotta
> <giuseppe.bilotta@gmail.com> wrote:
>> 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"?

This is indeed the case. The amount of space between items (and
between items and border) should be exactly a given quantity.

> If so, there's no direct way to achieve this.

I was afraid so 8-)

> 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.)

The thing is, I already have padding on the container (.4em), and I
want the spacing between the items to be equal to that amount (so,
still .4em).
I don't want to  change the container padding because that would
require me to rewrite all the styles for the other elements in it (the
flexbox ul is not the only thing contained within).

As I mentioned, this is something I tried, but if I set margin: .2em,
the outer elements will be at .6em from the #container border. I have
to ‘overcompensate’ for this by setting the ul width e.g. to calc(100%
+ .4em). This feels hackish, and of course still doesn't get the
expected results on browsers that don't support calc() (e.g. Opera).
But given what you say, I'll have to assume it's the best I can have
for the moment.

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

Thanks. Any place I can have a read about them?

-- 
Giuseppe "Oblomov" Bilotta

Received on Wednesday, 17 October 2012 06:13:37 UTC