Difference between the Flutter CrossAxisAlignment and MainAxisAlignment

Sometimes it can be so confusing and frustrating to differentiate between the MainAxisAlignment in Flutter and the CrossAxisAlignment. But then, here’s a detailed explanation and guide that would guide you to understand the MainAxisAlignment and CrossAxisAlignment.

The mainAxisAlignment simply controls the children to show in the horizontal direction of the Row, But controls the vertical direction of the Column. Let’s look at the picture with its types.

For crossAxisAlignment The direction of this parameter is the perpendicular with the mainAxisAlignment. You can see the relationship between them.

These two alignment works mostly when you apply your ROW and COLUMN, therefore See it as

• Social Media Sign-In Buttons in Flutter (Facebook, Twitter, Google, etc)

Column

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

Row

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

The Image below should give a better illustration on the difference between the MainAxis and CrossAxis.