MainAxisAlignment and CrossAxisAlignment in Flutter

Introduction

These properties help you arrange widgets inside a row or column neatly. They control where the widgets sit horizontally and vertically.

When you want to center buttons horizontally in a row.

When you want to space out items evenly in a column.

When you want to align text to the start or end inside a row.

When you want to stretch widgets to fill the available space vertically.

When you want to control the vertical alignment of icons inside a row.

Syntax

Flutter

Row(
  mainAxisAlignment: MainAxisAlignment.<value>,
  crossAxisAlignment: CrossAxisAlignment.<value>,
  children: [
    // your widgets here
  ],
)

Column(
  mainAxisAlignment: MainAxisAlignment.<value>,
  crossAxisAlignment: CrossAxisAlignment.<value>,
  children: [
    // your widgets here
  ],
)

MainAxisAlignment controls alignment along the main axis (horizontal for Row, vertical for Column).

CrossAxisAlignment controls alignment along the cross axis (vertical for Row, horizontal for Column).

Examples

Widgets are centered horizontally and aligned to the top vertically inside the row.

Flutter

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('A'),
    Text('B'),
    Text('C'),
  ],
)

Buttons are spaced evenly vertically and stretched to fill the column width.

Flutter

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    ElevatedButton(onPressed: () {}, child: Text('One')),
    ElevatedButton(onPressed: () {}, child: Text('Two')),
    ElevatedButton(onPressed: () {}, child: Text('Three')),
  ],
)

Sample App

This app shows three star icons in a row. They are spaced evenly across the screen horizontally and aligned vertically in the center.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Alignment Demo')),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: const [
              Icon(Icons.star, size: 50, color: Colors.red),
              Icon(Icons.star, size: 30, color: Colors.green),
              Icon(Icons.star, size: 40, color: Colors.blue),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

If you use CrossAxisAlignment.stretch, the children will expand to fill the cross axis size.

Use MainAxisAlignment.spaceBetween to put space only between widgets, not at the ends.

Remember that main and cross axis directions depend on whether you use Row (horizontal main axis) or Column (vertical main axis).

Summary

MainAxisAlignment controls how widgets are placed along the main direction (row or column).

CrossAxisAlignment controls how widgets are placed perpendicular to the main direction.

These properties help make your app look neat and organized.