CODEWITHSUNDEEP
flutterflutter-layout
callmejeevan
callmejeevan

Reputation: 1060

Flutter crossAxisAlignment vs mainAxisAlignment

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

Upvotes: 85

Views: 70126

Answers (7)

Aqeeb Hussain
Aqeeb Hussain

Reputation: 1

In Row Main Axis Alignment run horizontally and Cross Axis Alignment run vertically. In Column Main Axis Alignment run vertically and Cross Axis Alignment run Horizontally.

Upvotes: 0

Ellie Zou
Ellie Zou

Reputation: 2041

This two pictures are clear to show the meaning of MainAxisAlignment and CrossAxisAlignment. enter image description here enter image description here

(Pictures are from Network)

Upvotes: 17

Tuhin
Tuhin

Reputation: 390

Oncept

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

Upvotes: 5

oiyio
oiyio

Reputation: 5935

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.

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 268244

For Row:

mainAxisAlignment = Horizontal Axis
crossAxisAlignment = Vertical Axis

enter image description here

For Column:

mainAxisAlignment = Vertical Axis
crossAxisAlignment = Horizontal Axis

enter image description here

Image source

Upvotes: 187

Sebastian Engel
Sebastian Engel

Reputation: 3705

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.

Upvotes: 4

Rémi Rousselet
Rémi Rousselet

Reputation: 277517

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.

Upvotes: 6

Related Questions