Explain the difference between MainAxis and CrossAxis in Flutter layouts.

Beginner

Answer

In layout widgets:

  • MainAxis: Primary direction of the layout
  • CrossAxis: Perpendicular to the main axis

For Row: MainAxis is horizontal, CrossAxis is vertical
For Column: MainAxis is vertical, CrossAxis is horizontal

Column(
  mainAxisAlignment: MainAxisAlignment.center, // Vertical alignment
  crossAxisAlignment: CrossAxisAlignment.start, // Horizontal alignment
  children: [Text('Item 1'), Text('Item 2')],
)