MainAxisAlignment and CrossAxisAlignment in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does MainAxisAlignment control in a Flutter Row or Column?

MainAxisAlignment controls how the children are placed along the main axis, which is horizontal for Row and vertical for Column.

beginner

What is the main difference between MainAxisAlignment and CrossAxisAlignment?

MainAxisAlignment aligns children along the main axis (horizontal in Row, vertical in Column), while CrossAxisAlignment aligns children along the cross axis (vertical in Row, horizontal in Column).

intermediate

What does MainAxisAlignment.spaceBetween do?

It places the children so that the first child is at the start, the last child is at the end, and the remaining space is evenly distributed between the children.

intermediate

How does CrossAxisAlignment.stretch affect children in a Column?

It makes the children expand to fill the maximum width available along the cross axis (horizontal axis in a Column).

beginner

If you want to center children both horizontally and vertically in a Column, which properties would you set?

Set MainAxisAlignment.center to center vertically and CrossAxisAlignment.center to center horizontally.

In a Row, which axis does MainAxisAlignment control?

A Neither axis

B Horizontal axis

C Both axes

D Vertical axis

MainAxisAlignment controls the horizontal placement of children in a Row.

What does CrossAxisAlignment.start do in a Column?

A Aligns children to the left

B Aligns children to the right

C Aligns children to the top

D Aligns children to the bottom

In a Column, the cross axis is horizontal, so start aligns children to the left.

Which MainAxisAlignment value evenly spaces children including start and end edges?

A spaceEvenly

B spaceAround

C spaceBetween

D center

spaceEvenly puts equal space before, between, and after children.

If children in a Row have different heights, which CrossAxisAlignment makes them all match the tallest child?

A start

B center

C stretch

D end

stretch expands children to fill the cross axis size, matching the tallest child height.

Which property would you use to push all children to the end of a Column?

A CrossAxisAlignment.end

B CrossAxisAlignment.start

C MainAxisAlignment.start

D MainAxisAlignment.end

MainAxisAlignment.end pushes children to the bottom in a Column.

Explain how MainAxisAlignment and CrossAxisAlignment work differently in a Row and a Column.

Think about which axis is horizontal or vertical in each widget.

Describe a real-life scenario where you would use MainAxisAlignment.spaceBetween in a Flutter layout.

Imagine arranging objects on a shelf with equal gaps.