Fix 1px rounding issue for flexbox grids in Safari #260

[hudochenkov]

Remove unneeded float: right for flexbox grids and replaced with margin-left: auto. Fixes #260 and #200.

Also remove on rule duplicating.

Codepen with compiled code.

[corysimmons]

Don't merge.

Be careful with margin: auto in flexbox. It's pretty powerful.

[hudochenkov]

@corysimmons can you show me the example from the screenshot?

[hudochenkov]

@corysimmons I've fixed the problem and updated the codepen.

But let's face it, example is very unpredictable #200 (comment)

If we compile SCSS and clean from unused selectors it will look like:

.grid-lost-2 section {
  lost-center: 1170px;
}
.grid-lost-2 div {
  lost-column: 1/4;
}
@media all and (min-width: 400px) {
  .grid-lost-2 div {
    lost-column: 1/6;
  }
}
@media all and (min-width: 900px) {
  .grid-lost-2 div {
    lost-column: 1/12;
  }
}
.grid-lost-2 > section > div {
  lost-column: 1/4;
}
.grid-lost-2 > section > div:last-child {
  lost-column: 1/2 3;
}
.grid-lost-2 > section > div > section > div {
  lost-column: 1/4;
}

[corysimmons]

I don't have much of an opinion on it tbh. I just didn't want that flexbox margin auto breaking stuff. 👻

[hudochenkov]

Ping.

[peterramsing]

@hudochenkov I'm here! I promise. Life got crazy.