When should you use mainAxisAlignment and crossAxisAlignment?

Overview

mainAxisAlignment

crossAxisAlignment

Row

Column

Axis Directions

Column

Row

mainAxisAlignment — Along the Main Axis

Controls spacing/positioning of children along the primary direction.

dartCopy
Column(
  mainAxisAlignment: MainAxisAlignment.center, // children grouped at center vertically
  children: [Text('A'), Text('B'), Text('C')],
)

start

end

center

spaceBetween

spaceAround

spaceEvenly

dartCopy
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.person),
  ],
)
// Result: [HOME]     [SEARCH]     [PERSON]

crossAxisAlignment — Along the Cross Axis

Controls how children are aligned perpendicular to the main axis.

dartCopy
Row(
  crossAxisAlignment: CrossAxisAlignment.center, // children centered vertically
  children: [
    Text('Hello', style: TextStyle(fontSize: 24)),
    Text('World', style: TextStyle(fontSize: 12)),
  ],
)

start

end

center

stretch

baseline

TextBaseline

Common Examples

dartCopy
// Centered content in a Column
Column(
  mainAxisAlignment: MainAxisAlignment.center,   // Vertical center
  crossAxisAlignment: CrossAxisAlignment.center, // Horizontal center
  children: [
    Icon(Icons.star, size: 48),
    Text('You're a star!'),
  ],
)

// Bottom bar layout
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly, // Spread icons evenly
  crossAxisAlignment: CrossAxisAlignment.center,    // Vertically centered
  children: [
    IconButton(icon: Icon(Icons.home), onPressed: () {}),
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
    IconButton(icon: Icon(Icons.settings), onPressed: () {}),
  ],
)

When to Use What

mainAxisAlignment: center

crossAxisAlignment: center

mainAxisAlignment: spaceEvenly

spaceBetween

crossAxisAlignment: stretch

crossAxisAlignment: start

mainAxisAlignment: end

Memory Tip:

textCopy

main

= the direction the widget flows.

textCopy

cross

= the other direction.