Re: [css-flexbox] minimum spacing?

Hi Michiel,

     Indeed they are very similar, but it's almost like 'border-spacing' 
here, and why it's relevant. One should never have to know it's parent 
padding to negate them.  Let's say parent padding has '8px', and you 
want an equal spacing of child elements (/margin: 8px/).. Currently, 
anything that is touching the padding from the parent will have extra 
16px spacing.  I think flex-spacing would be better mind-suited for 
developers and more natural than outer-margin collapsing.  Really we're 
just trying to control the spacing between items in the flex box.  It 
would actually be 3 new properties:

*flex-spacing*: <length>[, <length>]

Would set both properties if one parameter set, or *flex-spacing-x* and 
*flex-spacing-y* if both are present.  These would be set on the flex 
container.

- Dennis

On 2015-07-10 04:01 AM, Michiel Bijl wrote:
> Jonathan Kingston proposed something like this on Specifiction: 
> http://discourse.specifiction.org/t/flex-suggestions/921/. He called 
> it “collapse of outer margins”, setting `outer-item-margin: 0;` on the 
> flex-container.
>
> Would it really be necessary to add two new properties for something 
> that basically does the same as `margin`?
>
> —Michiel
>
>> On 05 Jul 2015, at 18:13, Den <cyraid@gmail.com 
>> <mailto: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?
>>
>> - Dennis Fehr
>