[css-flexbox] minimum spacing?

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?

- Dennis Fehr

Received on Friday, 10 July 2015 08:49:09 UTC