What is Difference Between CrossAxisAlignment and MainAxisAlignment ?

· 3 min read
What is Difference Between CrossAxisAlignment and MainAxisAlignment
What is Difference Between CrossAxisAlignment and MainAxisAlignment

Row Widget is a widget where place multiple widgets in a row align horizontally. A Column Widget is a widget where the elements or child are arranged vertically like a column. So in this article, We will learn What is the Difference Between CrossAxisAlignment and MainAxisAlignment?

What is the Difference Between CrossAxisAlignment and MainAxisAlignment?

As the Row Widget arranges its Children into Horizontal Manner.

  • For Row:

mainAxisAlignment = Horizontal Axis
crossAxisAlignment = Vertical Axis

The below Image will help you to understand in a clear way.

Row Widget
Row Widget

As the Column Widget arrange it’s Children to Vertical Manner.

  • For Column:

mainAxisAlignment = Vertical Axis
crossAxisAlignment = Horizontal Axis

The below Image will help you to understand in a clear way.

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

In a Column Widget,

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

In a Row Widget,

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

Conclusion:

In this article, We have been through What is the Difference Between CrossAxisAlignment and MainAxisAlignment?

Drop us your valuable feedback to serve you better.

Thanks for Reading !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply