What does align-items do?

CSSJunior~1 min read

align-items aligns flex items along the cross axis (perpendicular to flex-direction) within a single line of the flex container.

Main values:

javascript

align-items: stretch;     /* default: stretch items to the height of the line */
align-items: flex-start;  /* push to the start of the cross axis */
align-items: flex-end;    /* push to the end of the cross axis */
align-items: center;      /* align to the center of the cross axis */
align-items: baseline;    /* align to the text baseline */

If flex-direction: row, the cross axis is vertical → align-items controls vertical alignment. If flex-direction: column, the cross axis is horizontal → align-items controls horizontal alignment.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.