Flutter crossAxisAlignment vs mainAxisAlignment

I'm confused about crossAxisAlignment and mainAxisAlignment. Can anyone please explain it in simple words?

For Row:

mainAxisAlignment = Horizontal Axis
crossAxisAlignment = Vertical Axis

---

For Column:

mainAxisAlignment = Vertical Axis
crossAxisAlignment = Horizontal Axis

Image source

This two pictures are clear to show the meaning of MainAxisAlignment and CrossAxisAlignment.

(Pictures are from Network)

Row/Column are associated to an axis:

• Horizontal for Row
• Vertical for Column

mainAxisAlignment is how items are aligned on that axis. crossAxisAlignment is how items are aligned on the other axis.

When you use a Row, its children are laid out in a row, which is horizontally. So a Row's main axis is horizontal. Using mainAxisAlignment in a Row lets you align the row's children horizontally (e.g. left, right). The cross axis to a Row's main axis is vertical. So using crossAxisAlignment in a Row lets you define, how its children are aligned vertically.

In a Column, it's the opposite. The children of a column are laid out vertically, from top to bottom (per default). So its main axis is vertical. This means, using mainAxisAlignment in a Column aligns its children vertically (e.g. top, bottom) and crossAxisAlignment defines how the children are aligned horizontally in that Column.

In a column,

• to center(or align) vertically, mainAxisAlignment is used.
• to center(or align) horizontally, crossAxisAlignment is used.

In a row,

• to center(or align) horizontally, mainAxisAlignment is used.
• to center(or align) vertically, crossAxisAlignment is used.

mainAxisAlignment property

When mainAxisSize is set to MainAxisSize.max, Row and Column might lay out their children with extra space. The mainAxisAlignment property determines how Row and Column can position their children in that extra space. mainAxisAlignment has six possible values:

Example: Modifying main axis alignment

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        BlueBox(),
        BlueBox(),
        BlueBox(),
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

crossAxisAlignment property

The crossAxisAlignment property determines how Row and Column can position their children on their cross axes. A Row’s cross axis is vertical, and a Column’s cross axis is horizontal. The crossAxisAlignment property has five possible values:

Example: Modifying cross axis alignment

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        BlueBox(),
        BiggerBlueBox(),
        BlueBox(),
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

class BiggerBlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

Depends on you how you wanna put your content on screen. we need to use mainAxis & CrossAxis alignment properties.

For more basic layout concepts: https://flutter.dev/docs/codelabs/layout-basics