Flutter crossAxisAlignment vs mainAxisAlignment

Shirsh Shukla
2 min readDec 12, 2020

--

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. your support means a lot to me! If you enjoy the content, I’d be grateful if you could consider subscribing to my YouTube channel as well.

I am Shirsh Shukla, a creative Developer, and a Technology lover. You can find me on LinkedIn or maybe follow me on Twitter or just walk over my portfolio for more details. And of course, you can follow me on GitHub as well.

Have a nice day!🙂

--

--

Shirsh Shukla

SDE at Reliance Jio | Mobile Application Developer | Speaker | Technical Writer | community member at Stack Overflow | Organizer @FlutterIndore