Can you use FlexLayout with the equivalent of a fixed css.gap between objects and have the width and height "hug" the objects inside the FlexLayout?

[mikeysouthwell]

Is it possible to use FlexLayout to create the equivalent of Figma Auto Size with 3 ellipses spaced by a fixed amount each and have the height and width "hug" the FlexLayout (this would give it a width of 26px and a height of 6px in this example and is based on the height and width of the objects in side 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 figure out how to 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)"
}

[mikeysouthwell]

Apologies, I should have been more specific. Can you do this using XAML? Kind Regards, Mike.

…

On Wed, 14 Feb 2024 at 12:02 pm, Noah Bazer ***@***.***> wrote: You can! The following code can achieve that, using .dot-container as the container class, and .dot as individual dots: .dot-container { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 3px; } .dot { display: block; height: 6px; width: 6px; border-radius: 25%; /* You may have to adjust this when changing dot size */ background-color: rgb(39, 45, 45); /* Set this to the color of the dots */ } — Reply to this email directly, view it on GitHub <#20406 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHWLFBCKV65FLCMFAS2J373YTQZMJAVCNFSM6AAAAABC44FJF6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DINRRGE3TO> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mikeysouthwell]

Anyone?

[mikeysouthwell]

Bump*

[mikeysouthwell]

Does anyone know if this is possible or do I need to submit an enhancement request?