implementing gap property for flexbox

[ChrisFloofyKitsune]

need to fix offsets growing too large with justify-content use

need to fix flex wrapping not happening properly

need to test with align-items use

[ChrisFloofyKitsune]

Having issues with this visual bug popping up...

Without gap changes

With gap changes

The bottom of the divs in this nested flexbox are getting cut off

[mikke89]

Nice to see work on this property :)

One way to think about this, is that the gap should behave as if adding extra length to the margins between all the items on the same row/column. Maybe it's possible to make use of the logic to handle margin? It's maybe a bit tricky regardless when it comes to wrapping especially.

We should also make sure to test for any changes/regressions with our visual test suite and the flexbox testes there-in.

[ChrisFloofyKitsune]

Added test cases to the visual tests and...

I am way off 🙃

[mikke89]

Nice, it's a start though! Something visual to work towards :)

[ChrisFloofyKitsune]

By adding the gaps as extra margin on the FlexItems, I got it to pass all the visual tests.

Gap adding logic is only run if the gap properties are greater than zero.

[mikke89]

I quite like the solution, and it looks correct to me! Nice.

It's a bit hard to understand exactly how it affects (or even how it should affect) the flexible length calculations, in terms of flex base size and such. But I think it makes sense like this, and it is an improvement regardless, so I am happy to take this addition to the algorithm.

I have a few minor comments. Also, the formatting seems to be a bit off, can you run it through clang-format?

[ChrisFloofyKitsune]

I quite like the solution, and it looks correct to me! Nice.

It's a bit hard to understand exactly how it affects (or even how it should affect) the flexible length calculations, in terms of flex base size and such. But I think it makes sense like this, and it is an improvement regardless, so I am happy to take this addition to the algorithm.

I have a few minor comments. Also, the formatting seems to be a bit off, can you run it through clang-format?

I've cleaned up the issues you raised in the comments

[mikke89]

Looks great, thanks a lot for the PR! This is a very welcome addition. ;) I just made some minor formatting changes at the end here.