alignItems vs justifyContent in flexbox

WHAT THIS TESTS This verifies you reason about flexbox in terms of main and cross axes rather than fixed horizontal and vertical, which is the only way to get it right when flexDirection changes.

A GOOD ANSWER COVERS Every flex container has a main axis and a cross axis. justifyContent positions and distributes children along the main axis, with values like flex-start, center, flex-end, space-between, space-around, and space-evenly. alignItems positions children along the cross axis, with values like flex-start, center, flex-end, stretch, and baseline. The crucial point is that which axis is main depends on flexDirection. In a column container the main axis runs vertically and the cross axis runs horizontally, so justifyContent affects vertical placement and alignItems affects horizontal placement. In a row container the axes swap. Tying the definitions to the axes, not to fixed directions, is what makes the answer correct in all cases.

COMMON WRONG ANSWERS Saying justifyContent is always horizontal and alignItems always vertical; that is only true for the default web row and breaks for column. Confusing alignItems with alignSelf, which overrides alignItems for a single child. Forgetting that stretch is the default for alignItems.

LIKELY FOLLOW-UPS What does alignSelf do? How do you center a single child both ways? What is the default value of alignItems?

ONE CONCRETE EXAMPLE With a parent View flexDirection column and three children: setting justifyContent center pushes the stack of children to the vertical middle of the parent along the main axis, leaving equal space above and below the group. Setting alignItems center instead centers each child horizontally across the parent's width along the cross axis. Using both centers the children in both directions.