Align content in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property align-content do?

The align-content property controls how multiple rows or columns of content are spaced and aligned within a container when there is extra space in the cross-axis (vertical for rows, horizontal for columns).

beginner

Name three common values of align-content and what they do.

• flex-start: Packs rows/columns toward the start of the container.
• center: Packs rows/columns in the center with equal space above and below.
• space-between: Distributes rows/columns evenly with first at start and last at end.

intermediate

When does align-content have an effect in a flex container?

It works only when there are multiple lines of flex items (i.e., when flex-wrap is set to wrap and items wrap onto new lines).

intermediate

How is align-content different from align-items?

align-items aligns items within a single line along the cross-axis. align-content aligns multiple lines of items when there is extra space.

beginner

What CSS layout methods support align-content?

align-content works with Flexbox and CSS Grid layouts.

Which CSS property controls the spacing between multiple rows in a flex container?

A align-content

B justify-content

C align-items

D flex-wrap

align-content controls spacing between multiple rows or columns in flex or grid containers.

When does align-content have no visible effect?

A When there are multiple lines of items

B When flex-wrap is set to wrap

C When flex items are in a single line

D When using CSS Grid

align-content only works when there are multiple lines of items. If all items are in one line, it has no effect.

Which value of align-content distributes rows evenly with space between them?

A space-between

B flex-start

C center

D stretch

space-between places rows evenly with space between, first row at start and last at end.

What is the default value of align-content in a flex container?

A space-around

B center

C flex-start

D stretch

The default is stretch, which stretches rows or columns to fill the container.

Which CSS property aligns items inside a single row or column?

A justify-content

B align-items

C align-content

D flex-direction

align-items aligns items inside a single line along the cross-axis.

Explain how align-content works in a flex container with wrapped items.

Think about how rows or columns are spaced when they wrap.

Describe the difference between align-content and align-items in CSS layouts.

Consider how many lines of items each property affects.