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

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

Sorry for the 2-month delay in replies here, but I was actually
referring to padding on the flexbox.

That is, say you want .4em spacing between all the items, in both
axises, and between the items and the flex container's edges.  To
achieve this, just give every item a .2em margin (none of them will
collapse, so the between-item and between-line spacing will be .4em
total), and then give the flexbox a .2em padding (same deal - the
margins won't collapse with padding, so they'll all be .4em away from
the edge).  If you leave off the padding, you'll just have a
half-space between items and the flexbox edge, like what space-around
gives you.

The only thing you can't do currently is have a constant spacing
between items and lines, but have them flush against the flexbox's
edges.

~TJ

Received on Monday, 3 December 2012 22:30:30 UTC