Flexbox layout (flexDirection, justifyContent, alignItems) in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does flexDirection control in a Flexbox layout?

flexDirection sets the main axis direction for the layout. It decides if items are placed in a row (horizontally) or a column (vertically).

beginner

Explain justifyContent in Flexbox.

justifyContent aligns children along the main axis (the direction set by flexDirection). It controls how space is distributed between and around items.

beginner

What is the role of alignItems in Flexbox?

alignItems aligns children along the cross axis (perpendicular to the main axis). It controls vertical or horizontal alignment depending on flexDirection.

intermediate

If flexDirection is row, which axis does justifyContent affect?

It affects the horizontal axis, arranging items left to right or with space between them horizontally.

intermediate

How does alignItems: center affect children in a Flexbox with flexDirection: column?

It centers children horizontally because the cross axis is horizontal when the main axis is vertical.

In React Native Flexbox, what is the default value of flexDirection?

A column

B row

C row-reverse

D column-reverse

The default flexDirection in React Native is column, meaning items stack vertically by default.

Which justifyContent value places items at the end of the main axis?

A flex-start

B center

C flex-end

D space-between

flex-end aligns items to the end of the main axis.

What does alignItems: stretch do by default?

A Centers items on cross axis

B Stretches items to fill cross axis

C Aligns items to start of cross axis

D Aligns items to end of cross axis

stretch makes children expand to fill the cross axis space.

If flexDirection is row, which axis is the cross axis?

A Vertical

B Horizontal

C Diagonal

D None

When main axis is horizontal (row), cross axis is vertical.

Which property controls spacing between items along the main axis?

A flexWrap

B alignItems

C flexDirection

D justifyContent

justifyContent manages spacing along the main axis.

Describe how flexDirection, justifyContent, and alignItems work together in a React Native Flexbox layout.

Think about main and cross axes and how items are arranged horizontally or vertically.

Explain what happens visually when you set flexDirection: row, justifyContent: space-between, and alignItems: center in a React Native Flexbox container.

Imagine a row of boxes spaced apart with vertical alignment in the middle.