Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter crossAxisAlignment vs mainAxisAlignment

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

like image 907
callmejeevan Avatar asked Dec 19 '18 11:12

callmejeevan


People also ask

What is MainAxisAlignment in flutter?

Main Axis is vertical and the Cross Axis is horizontal. MainAxisAlignment aligns its children vertically and CrossAxisAlignment aligns horizontally in that Column.

What is main axis size in flutter?

A Row 's main axis is horizontal, and a Column 's main axis is vertical. The mainAxisSize property determines how much space a Row and Column can occupy on their main axes. The mainAxisSize property has two possible values: MainAxisSize.

How do you use MainAxisAlignment value?

Place the free space evenly between the children as well as before and after the first and last child. Place the children as close to the start of the main axis as possible. If this value is used in a horizontal direction, a TextDirection must be available to determine if the start is the left or the right.


2 Answers

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

like image 142
CopsOnRoad Avatar answered Oct 15 '22 11:10

CopsOnRoad


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)

like image 21
Ellie Zou Avatar answered Oct 15 '22 09:10

Ellie Zou