Feature request: space-evenly

[soumya92]

With space-around, the space between the first item and the left edge of the flexbox is half the space between items. This is probably because the items have similar spacing to their left and right, but between two items that spacing gets added twice.

It would be nice to have an option for consistent spacing everywhere, even though it's not supported in CSS. Thoughts?

[thagikura]

Thanks for the suggestion, that sounds a reasonable request.

I may be wrong, but I thought I saw a similar attribute in CSS for Flexbox or Grid.
Anyway, I'll keep this as an enhancement.

[soumya92]

Yeah, turns out CSS Grid already supports space-evenly, and Firefox just started shipping support for space-evenly in flexbox as well

[jjhesk]

is there a support for spacing between items?

[feinstein]

@thagikura This would be great to have, some sort of margin that will be equal between all the items and between an item and the screen borders.

[thagikura]

This is now implemented. Will be released in the next release.

[feinstein]

@thagikura is it possible to make the items centered but with a left justification? For example, if I have 5 items, 3 on the first row and 2 on the second row, they will be centered on the screen, but the 2 items on the second row will be aligned with the 1st and the 2nd items on the first row, as if this was a table? Because right now if I justify them to be centered, the 1st item of the second row will be in the middle of the 1st and 2nd items from the first row.

If it's confusing, please let me know and I will send you a picture.

[thagikura]

Hi @feinstein,

Could you send me a picture?
Also if it's not part of the specification in the original justify-content attribute, it might be difficult to include it in this library because that is going to be counter intuitive.

[feinstein]

@thagikura right now we can have this:

Or this:

What I wanted is this: