Stack Panels

Flexible layout containers for building rows and columns with predictable spacing and alignment.

Use this example to explore default behavior, customization points, and accessibility-friendly patterns in a real Blazor page.

Stack Panel

MgStackPanel

A flex-based container with typed options for orientation, justification, alignment, wrapping, and spacing.

Property	Type	Default	Description
Orientation	MgOrientation	Vertical	Sets the stack direction.
JustifyContent	MgFlexJustifyContent	Default	Controls main-axis distribution.
AlignItems	MgFlexAlignItems	Default	Controls cross-axis alignment for items.
AlignContent	MgFlexAlignContent	Default	Controls alignment of wrapped lines.
Gap	MgFlexGap	Default	Controls spacing between children.
Wrap	MgFlexWrap	Default	Controls whether children can wrap onto multiple lines.
Classes	string	null	Additional CSS classes applied to the container.
MgStyle	string	null	Inline style string for the container.
ChildContent	RenderFragment	null	Content rendered inside the flex container.

Value	Class	Description
Default	-	No justify class is applied.
Start	justify-start	Items are packed toward the start.
End	justify-end	Items are packed toward the end.
Center	justify-center	Items are centered on the main axis.
Between	justify-between	Items spread with space between them.
Around	justify-around	Items spread with space around them.
Evenly	justify-evenly	Items spread with equal space everywhere.

Value	Class	Description
Default	-	No alignment class is applied.
Start	items-start	Items align to the start of the cross axis.
End	items-end	Items align to the end of the cross axis.
Center	items-center	Items align to the center of the cross axis.
Baseline	items-baseline	Items align to their typographic baselines.
Stretch	items-stretch	Items stretch to fill the cross axis.

Value	Class	Description
Default	-	No content alignment class is applied.
Start	content-start	Wrapped rows cluster at the start.
End	content-end	Wrapped rows cluster at the end.
Center	content-center	Wrapped rows center in the container.
Between	content-between	Wrapped rows are spaced between start and end.
Around	content-around	Wrapped rows are spaced around.
Evenly	content-evenly	Wrapped rows are evenly distributed.
Stretch	content-stretch	Wrapped rows stretch to fill the container.

Value	Class	Description
Default	-	No wrap class is applied.
NoWrap	flex-nowrap	Prevents items from wrapping.
Wrap	flex-wrap	Allows items to wrap onto the next line.
WrapReverse	flex-wrap-reverse	Wraps items in reverse order.