- From: Tab Atkins Jr. <[email protected]>
- Date: Mon, 13 Jul 2015 12:10:53 -0700
- To: Den <[email protected]>
- Cc: www-style list <[email protected]>
On Sun, Jul 5, 2015 at 9:13 AM, Den <[email protected]> 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