Use CSS3 Flexbox in Grids when possible

[ericf]

This change from @msweeney makes Grids use CSS3 Flexbox when possible in order to avoid the side-effects of setting a negative letter-spacing. The letter-spacing approach is used as a fallback for older browsers, and the Flexbox rules trump it.

This should improve support for Grids across an even larger set of OS/browser combinations, and its ability to withstand the use of non-default fonts when set by either the person in their browser settings or by the developer using custom fonts.

Relates to: #41, #162, #166, #189

[lkraav]

This is starting to hurt. It was possibly to use text-align on inline-blocks before. Now with -webkit-flex, is there no similar unified solution? Have to resort to having two rulesets for these browsers?

[ericf]

/cc @msweeney

[msweeney]

I think we rushed the flexbox fix in without proper vetting. There are other side-effects in addition to not supporting text-align, such as creating stacking and block formatting contexts.

Its possible to use class attributes to bind alignment behavior instead of relying on text-align and vertical-align, but rather than continuing to plug holes in the dam here, I think we should probably start fresh with a list of explicit requirements for grids. Implicit requirements for alignment, wrapping/nowrapping, conditional breakpoints, etc. compete with each other to some degree, and have forced us down this rabbit hole of inline-block/flexbox, negative letter-spacing and font-family overriding, breaking our tenet that Pure "Stays out of your way."

If this sounds reasonable, I can take an initial pass at the requirements based on legacy support.

[lkraav]

Thanks for the attention. In the meanwhile I simply rearranged some structure for this one project and did some good'ol calculated padding instead of text-align.

But yeah, flexbox is a bit raw for now..

[tilomitra]

@msweeney It would be great if you could take a pass at that, keeping in mind the responsive grid work that we've been doing.