Align items in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property align-items do in a flex container?

The align-items property controls how flex items are aligned along the cross axis (usually vertical) inside a flex container.

It sets the default alignment for all items.

intermediate

Name the possible values of align-items and what they do.

• flex-start: Align items to the start of the cross axis.
• flex-end: Align items to the end of the cross axis.
• center: Center items along the cross axis.
• baseline: Align items so their text baselines line up.
• stretch: Stretch items to fill the container (default).

beginner

How does align-items: stretch behave if the flex items have no fixed height?

Items will stretch to fill the container's height along the cross axis, making them all the same height.

intermediate

What is the difference between align-items and justify-content in flexbox?

align-items aligns items along the cross axis (usually vertical).

justify-content aligns items along the main axis (usually horizontal).

beginner

Can align-items be used on non-flex containers?

No. align-items only works on flex containers or grid containers.

What does align-items: center; do in a flex container?

A Centers items horizontally along the main axis

B Centers items vertically along the cross axis

C Aligns items to the start of the main axis

D Stretches items to fill the container width

align-items controls alignment along the cross axis, so center centers items vertically (if flex direction is row).

Which align-items value makes all flex items the same height by default?

A baseline

B flex-start

C stretch

D flex-end

stretch makes items stretch to fill the container's cross axis size.

If you want text baselines of flex items to line up, which align-items value should you use?

A baseline

B flex-end

C center

D stretch

baseline aligns items so their text baselines match.

Which CSS property aligns items along the main axis in flexbox?

A align-items

B align-content

C flex-direction

D justify-content

justify-content aligns items along the main axis (usually horizontal).

Can align-items be used on a block container that is not a flex or grid container?

A No, it only works on flex or grid containers

B Only if display is inline

C Only if items have fixed height

D Yes, always

align-items only works on flex or grid containers.

Explain how the align-items property affects the layout of flex items inside a flex container.

Think about vertical alignment in a horizontal flex container.

Describe the difference between align-items and justify-content in flexbox layout.

Consider the directions of alignment in a flex container.