Flutter crossAxisAlignment vs mainAxisAlignment

In this article we try to clear over confusion regarding this two property in two different widget that,they are mainly used.

So let’s start,

crossAxisAlignment and mainAxisAlignment.

So let’s start,

  1. First is crossAxisAlignment,

This property use in,

colum widget as Horizontally axis.

Row widget as Vertically axis.

2.Second is mainAxisAlignment,

This property use in,

colum widget as Vertically axis.

Row widget as Horizontally axis.

I know everyone get confusions regarding why this two property changes with two different widget for Row and column,

For this it’s a simple answer is,

mainAxisAlignment is how items are aligned on that axis.

In other words,

How the children should be placed along the main axis.

And,

crossAxisAlignment is how items are aligned on the other axis.

In other words,

How the children should be placed along the cross axis in a flex layout.

  • for widget properties,

And Column is basically used for children items placed in a vertically manner.

And Row is basically used for children items placed in a Horizontally manner.

So that’s why,

this two action perform differently by this two widget property(Row and Column).

if you got something wrong? Mention it in the comments. I would love to improve.
I am Shirsh Shukla. A creative developer and a Technology lover. You can find me on Linkedin or maybe follow me on Twitter.
Have a nice day!🙂

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store