fix: do not set gap if space is evenly distributed

[danbb1]

Hello! Excellent work on this project. I noticed a small bug with the auto layout generation that this should fix.

If an auto layout parent is set to Auto item spacing and it previously had a numerical value, Figma will keep the unused numerical value stored on the node.

This causes both justify-content: space-between and gap: n px to be set in the generated html. If the gap is larger than the available space, then the html will render inaccurately compared to the design. I think these 2 properties should be mutually exclusive.

As an example see this simple Figma design with 2 rows of 3 equally sized squares. The top row has an item spacing of 25px, while the second row initially had an item spacing of 50px but it is now Auto:

This generates the html:

<div style="width: 745px; height: 404px; border: 2.50px black solid; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
  <div style="align-self: stretch; padding-left: 25px; padding-right: 25px; padding-top: 16px; padding-bottom: 16px; background: white; justify-content: flex-start; align-items: flex-start; gap: 25px; display: inline-flex">
    <div style="width: 215px; height: 170px; background: #ED2020"></div>
    <div style="width: 215px; height: 170px; background: #3C20ED"></div>
    <div style="width: 215px; height: 170px; background: #2C7612"></div>
  </div>
  <div style="align-self: stretch; padding-left: 25px; padding-right: 25px; padding-top: 16px; padding-bottom: 16px; background: white; justify-content: space-between; align-items: flex-start; gap: 50px; display: inline-flex">
    <div style="width: 215px; height: 170px; background: #ED2020"></div>
    <div style="width: 215px; height: 170px; background: #3C20ED"></div>
    <div style="width: 215px; height: 170px; background: #2C7612"></div>
  </div>
</div>

Which renders like this:

To accommodate the gap, the width of the squares in the second row are reduced. With this fix, the generated html will not include the gap: 50px property and the rows will render identically as they are in the design.

I've updated both the HTML and Tailwind generation, however, I am not familiar with either Flutter or Swift so the problem may exist there too.

[bernaferrari]

Thanks!!