All 7 Layout Widgets (Row, Column, Stack, Container) questions
More in Layout Widgets (Row, Column, Stack, Container)
What are Row and Column, and how do they let you arrange several separate child widgets either horizontally or vertically alongside one another? What is the Container widget, and how does it let you conveniently combine padding, margin, background color, and border decoration all together within just one single genuinely convenient widget? How does the Stack widget let you genuinely layer several separate child widgets directly on top of one another, and how does the Positioned widget let you precisely control exactly where each individual layered child actually appears within that Stack? How do Expanded and Flexible let you properly control exactly how much genuinely available space a specific given child should actually take up relative to its own siblings within a surrounding Row or Column? How does Flutter's own underlying constraint based layout system genuinely work, specifically regarding how constraints actually flow down the widget tree while sizes actually flow back up? How can you properly build a genuinely fully custom layout widget by directly extending MultiChildLayoutDelegate or CustomMultiChildLayout, for a genuinely specific complex arrangement not already covered by any of Flutter's own existing standard layout widgets?
Advertisement
Back to results for “Fundamentals”
Flutter › Layout Widgets (Row, Column, Stack, Container)

How do mainAxisAlignment and crossAxisAlignment properly control the specific alignment of children within a Row or Column along each of those particular widget's own two genuinely separate distinct axes?

Intermediate

Answer

For a given Row, the main axis genuinely runs horizontally while the cross axis genuinely runs vertically, and vice versa for a Column, and mainAxisAlignment controls exactly how children are actually distributed along that particular main axis, such as evenly spacing them apart or centering them together, while crossAxisAlignment separately controls exactly how those same children are actually aligned along the considerably shorter perpendicular cross axis, such as stretching every child to properly fill that entire available cross axis space or simply aligning them all consistently to one particular specific side.
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [Icon(Icons.menu), Text('Title'), Icon(Icons.search)],
)
Real-world example A custom app bar properly uses spaceBetween for its mainAxisAlignment to correctly push a menu icon and a search icon apart toward opposite edges while keeping the centered title text properly positioned directly in between them, and uses center for its crossAxisAlignment to correctly vertically align every one of those elements consistently.

Common follow-ups: What genuinely other specific alignment options besides spaceBetween does MainAxisAlignment already provide?;How does crossAxisAlignment genuinely behave differently if the surrounding Row's own overall height is not actually explicitly constrained at all?

Responsive & Adaptive UI Design;Flutter Widgets Fundamentals (Stateless & Stateful)
All 7 Layout Widgets (Row, Column, Stack, Container) questions