Re: [css-flexbox] minimum spacing?

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