.NET MAUI › XAML & UI Layouts

When would you use FlexLayout instead of Grid or StackLayout?

Intermediate

Answer

FlexLayout implements CSS flexbox semantics and is ideal when children should wrap, grow, shrink, or align along an axis without fixed rows/columns. Use it for tag clouds, toolbars, or card collections that reflow based on available space, where a Grid would be too rigid.

<FlexLayout Wrap="Wrap" JustifyContent="SpaceEvenly">
    <Button Text="Tag 1" />
    <Button Text="Tag 2" />
    <Button Text="Tag 3" />
</FlexLayout>

Real-world example A filter bar of chip buttons wraps to a second line on a narrow phone but sits on one line on a tablet, handled entirely by FlexLayout.

Common follow-ups: How does Wrap work? | What are the main FlexLayout properties?

Layouts Responsive UI Grid