W3C home > Mailing lists > Public > www-style@w3.org > July 2015

Re: [css-flexbox] minimum spacing?

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 13 Jul 2015 12:10:53 -0700
Message-ID: <CAAWBYDD4Y2wG3Rh3t0OFpifj=gmF1m2WfyKrDgbU7Xou4+dukA@mail.gmail.com>
To: Den <cyraid@gmail.com>
Cc: www-style list <www-style@w3.org>
On Sun, Jul 5, 2015 at 9:13 AM, Den <cyraid@gmail.com> wrote:
> Hi there,
>
>     There seems to be issues with creating a static spacing of children in
> the flex container.  There are questions on the net already which ask this,
> and the only 'solution' would be to enforce a constant margin to all
> children, and a negative margin of the same value to negate.  Let's say you
> want to create a layout of children all 4px spaced, you could accomplish
> this with margin, but you will have unnecessary spacing when there is no
> wrapping.
>
> Example:
>
>     Let's say you have a 'row' layout of 4 same size boxes, and it covers
> about half of the screen and you are spacing them out with '4px'
> margin-right.  Now let's say you resize the browser and it wraps, 2 are on
> the top, and 2 are on the bottom; now the 2 children that are wrapped are
> hugging the top row.  You would say you could do 'margin-bottom' on the
> items, but then if they aren't wrapped, the content under it will have
> unwanted spacing.
>
> Proposal:
>
>     Add a new property could be added called flex-spacing-x, and
> flex-spacing-y (using length as values obviously).  These properties could
> share the same priority when calculating as 'margin'? Respecting min-width,
> etc.
>
> I'm currently facing this problem as we speak, and the only known
> work-around is the margin negation.
> Any thoughts?

This is already tracked in the wiki page for Flexbox level 2 ideas:
https://wiki.csswg.org/spec/css-flexbox-2 (the fourth one, about
explicit control over packing spaces).

~TJ
Received on Monday, 13 July 2015 19:11:40 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:18 UTC