Add FlexLayout XAML property "Gap" with the equivalent of a fixed css.gap between objects

[mikeysouthwell]

Description

Is it possible to use FlexLayout to create the equivalent of Figma Auto Size with 3 ellipses spaced by a fixed amount (gap) of 3 pixels each and have the height and width "hug" the FlexLayout (this would give it a width of 24px and a height of 6px in this example and is based on the height and width of the objects inside the FlexLayout)?

As a simple example, this Kebab Menu icon:

This is the 48x48 frame the icon is contained in which is in auto layout (I assume this would be a FlexLayout in MAUI):

{ "property.type": "large", "node.name": "type-large", "node.type": "component", "node.key": "679ec1f49a3b24ed5cb3599ad3fe1cb5c8335f3f", "component.key": "cbf38c957a0dc45f701ac6833962ed015079117e", "component.type": "component-set", "component.name": "kebab-menu", "css.display": "flex", "css.width": "48px", "css.height": "48px", "css.flexDirection": "column", "css.justifyContent": "center", "css.alignItems": "center", "css.flexShrink": "0", "autolayout.layoutMode": "vertical", "autolayout.paddingLeft": "0", "autolayout.paddingRight": "0", "autolayout.paddingTop": "0", "autolayout.paddingBottom": "0", "autolayout.itemSpacing": "0", "autolayout.primaryAxisAlignItems": "center", "autolayout.counterAxisAlignItems": "center" }

This is the frame the 3 ellipses are in, which again I would assume is in FlexLayout, but I can't give it fixed spacing:

{ "node.name": "dots", "node.type": "frame", "css.display": "flex", "css.justifyContent": "center", "css.alignItems": "center", "css.gap": "3px", "css.boxShadow": "0px 0.5px 1px 0px rgba(0, 0, 0, 0.25)", "autolayout.layoutMode": "horizontal", "autolayout.paddingLeft": "0", "autolayout.paddingRight": "0", "autolayout.paddingTop": "0", "autolayout.paddingBottom": "0", "autolayout.itemSpacing": "3", "autolayout.primaryAxisAlignItems": "center", "autolayout.counterAxisAlignItems": "center" }

Each of the dots (ellipses) have these parameters:

{ "node.name": "dot", "node.type": "vector", "css.width": "6px", "css.height": "6px", "css.fill": "var(--Dark-Gray, #324A49)" }

Public API Changes

N/A

Intended Use-Case

Currently there is no way to put a fixed gap between objects in a FlexLayout in MAUI. You can do JustifyContent with Space Between, but that doesn't allow you to specify what the space between value is manually.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[mikeysouthwell]

Any update on this?

[mikeysouthwell]

Any update on this?