Leftover float property in flexbox grid

[hudochenkov]

Example code from Flexbox Grid section in readme add rule with float. It's a workaround for browsers which doesn't support flex-wrap or it's just a mistake?

Before:

@lost flexbox flex;

section {
  lost-center: 980px;
}

div {
  lost-column: 1/3;
}

After:

section {
  display: flex;
  flex-flow: row wrap;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

div {
  flex: 0 0 auto;
  width: calc(99.99% * 1/3 - (30px - 30px * 1/3));
}

div:nth-child(1n) {
  margin-right: 30px;
}

div:last-child {
  margin-right: 0;
}

div:nth-child(3n) {
  float: right; /* ← this property and rule */
}

div:nth-child(3n) {
  margin-right: 0;
}

[peterramsing]

Yes, that is a work-around/feature for non-flex grids. I suppose that could be removed if flex is enabled... see #218

Is this causing any issues?

[hudochenkov]

I've tested flexbox behavior in Safari 9.0.3 on your example from #218. There is still an issue with 1px like in #218 when flexboxes are using. float: right doesn't fix this. The only solution I've found is using 99.999999% for calc(). Probably we should test 99.99% vs 99.999999% in variety of browsers and see which value works best.

[hudochenkov]

After I've made an PR I've remembered about margin: auto and flexboxes trick. If there is empty space in flexbox container margin: auto will push flex item on the specified side. So we can remove 1px on the right if flex item will be pushed from the left all the time. It's working like float: right.

Codepen with compiled code after with PR #262.