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?

[Axemasta]

This would be insanely useful as currently I have found an extremely cursed method where you apply a margin to all items (easiest with a data template) that is 1/4 of your desired gap. Then apply a negative padding to the flex layout that is 1/2 the desired width. The basis for the row must add up to 100 and then you'll have a gap that lines up with what you need:

[aeonblaire]

I think my question is related to this: #25259 as I am trying to achieve the same.

[LeoJHarris]

Gap should apply to the direction including row gap if the direction is growing by row.