docs: Add AutoLayout vs CSS Flexbox comparison documentation

[Copilot]

GitHub Issue (If applicable): https://github.com/unoplatform/uno.toolkit.ui-private/issues/17

PR Type

• Documentation content changes

What is the current behavior?

No documentation exists comparing AutoLayout (Figma's layout paradigm) with CSS Flexbox, making it difficult for developers familiar with web layouts to understand how to achieve equivalent layouts in Uno Toolkit.

What is the new behavior?

Adds comprehensive comparison documentation (doc/controls/AutoLayout-vs-CSS-Flexbox.md) covering:

• Container properties: Direction, Gap/Spacing, justify-content vs Justify/PrimaryAxisAlignment, align-items vs CounterAxisAlignment
• Item properties: flex-grow vs PrimaryAlignment="Stretch", flex-basis vs Width/Height/PrimaryLength, align-self vs CounterAlignment
• Key differences identified:
  • No wrapping support (always single row/column)
  • Equal distribution only (no proportional flex-grow)
  • No space-around or space-evenly
  • IsReverseZIndex affects z-order only, not visual layout order
  • Padding behavior depends on alignment (Figma model)
• 5 common layout scenarios with side-by-side CSS and XAML examples
• Feature comparison summary table for quick reference

Also updates AutoLayoutControl.md with "See Also" links and adds TOC entry.

PR Checklist

• Tested code with current supported SDKs
• Tested the changes where applicable:
  • UWP
  • WinUI
  • iOS
  • Android
  • WASM
  • MacOS
• Updated the documentation as needed:
  • General Doc Update
  • Controls Doc Update
  • Extensions Doc Update
  • controls-styles.md
  • lightweight-styling.md (LightWeight Styling Resource Keys)
• Runtime Tests and/or UI Tests for the changes have been added (for bug fixes / features) (if applicable)
• Contains NO breaking changes
• Associated with an issue (GitHub or internal)
• Commits must be following the Conventional Commits specification.

Other information

Documentation-only change. Analysis based on AutoLayout source code in src/Uno.Toolkit.UI/Controls/AutoLayout/.

Internal Issue (If applicable):

Original prompt

Understand the requirements from this issue: https://github.com/unoplatform/uno.toolkit.ui-private/issues/17

I want you to research how the AutoLayout control in Uno Toolkit compares with the features and functionality of a CSS FlexBox.

We should be able to break down each scenario for a CSS Flexbox and compare it with how you would achieve the same layout using AutoLayout. Identify how the functionality of AutoLayout might differ from css flexbox. The AutoLayout control is an implementation of Figma's AutoLayout.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[unodevops]

⚠️⚠️ The build 184938 has failed on Uno Toolkit - CI.