search

bernaferrari / FigmaToCode

Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
https://www.figma.com/community/plugin/842128343887142055
GNU General Public License v3.0
3.7k stars 285 forks source link

A bug of primaryAlign when primaryAxisAlignItems = SPACE_BETWEEN #22

Closed oney closed 3 years ago

oney commented 3 years ago

https://github.com/bernaferrari/FigmaToCode/blob/ae47851096afafbd1c21bab34149f6dbdad7b2f8/src/html/htmlMain.ts#L244 This gives justify-content: justify-between;, but there is no justify-between I think. primaryAlign = "space-between"; should fix it.

Also, it's further better if not inserting <div style="width: --px"></div> empty div between real items when primaryAxisAlignItems = SPACE_BETWEEN because flexbox will handle that.

However, space-between still causes a problem for one single item in parent div. See this. I don't like margin: 0 auto; solution. One solution may be if there is only 1 item in the parent div, use center rather than space-between.(but it doesn't work for dynamic children)

Please let me know if you need examples to demonstrate this. Thanks a lot for this project!

bernaferrari commented 3 years ago

there is no justify-between I think

You are right. It came from Tailwind. Fixed!

it's further better if not inserting

That makes sense! Added an exception for this, it will now center.

Thanks!