midFlutter
What is the difference between MainAxisAlignment and CrossAxisAlignment?
Updated Apr 28, 2026
Short answer
MainAxisAlignment aligns children along the primary axis, while CrossAxisAlignment aligns them along the secondary (perpendicular) axis.
Deep explanation
For a Row, the main axis is horizontal, and the cross axis is vertical. For a Column, the main axis is vertical, and the cross axis is horizontal. These properties define how extra space is distributed and how items align against each other.
Real-world example
Building an app bar layout where a title and a settings icon are pushed to opposite ends (spaceBetween) but vertically centered.
Common mistakes
- Confusing the axes. Setting MainAxisAlignment on a Column expecting it to center items horizontally.
Follow-up questions
- What is MainAxisSize?
- How do you stretch children to fill the cross axis?