Align items in CSS - Browser Rendering Trace

Render Flow - Align items

[Parse CSS selector 'display:flex'] -> [Set container as flexbox] -> [Parse 'align-items' property] -> [Calculate cross axis alignment] -> [Position flex items vertically] -> [Paint updated layout] -> [Composite final frame]

The browser reads the CSS, sets the container as a flexbox, then applies the 'align-items' property to position children along the vertical (cross) axis before painting and compositing the final layout.

Render Steps - 3 Steps

Code Added:display: flex;

Before

[Container]
[Box 1]
[Box 2]
[Box 3]

→

After

[Container: flex row]
[Box 1][Box 2][Box 3]

Setting display:flex changes the container to a flexbox, arranging children in a horizontal row by default.

🔧 Browser Action:Creates flex formatting context, triggers reflow to arrange children in a row.

Code Sample

A horizontal row of three blue boxes inside a bordered container, vertically centered using align-items: center.

CSS

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

CSS

.container {
  display: flex;
  height: 8rem;
  border: 2px solid #333;
  align-items: center;
}
.box {
  width: 4rem;
  height: 4rem;
  background-color: #4a90e2;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.5rem;
  font-weight: bold;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 1 (display:flex), how are the boxes arranged inside the container?

A Stacked vertically, one on top of another

B In a horizontal row, side by side

C Overlapping each other in the same spot

D Hidden and not visible

Common Confusions - 2 Topics

Why don't my flex items center vertically when I use align-items: center?

If the container has no height or the height is too small, vertical centering won't be visible. You need to set a height on the container to see the effect (see step 2).

💡 Always give the flex container some height to see vertical alignment.

Why does align-items: stretch make my items taller than expected?

The default value 'stretch' makes flex items expand to fill the container's height if no height is set on the items themselves (see property_table).

💡 Set a fixed height on flex items to prevent stretching.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
align-items	flex-start	Cross axis (vertical)	Aligns items to the top of the container	Align items at top
align-items	center	Cross axis (vertical)	Centers items vertically within container	Center items vertically
align-items	flex-end	Cross axis (vertical)	Aligns items to the bottom of the container	Align items at bottom
align-items	stretch	Cross axis (vertical)	Stretches items to fill container height	Fill container height
align-items	baseline	Cross axis (vertical)	Aligns items along their text baseline	Align text baseline

Concept Snapshot

align-items controls vertical alignment of flex items. Default is 'stretch' which fills container height. Common values: flex-start (top), center (middle), flex-end (bottom). Requires container height to see vertical alignment. Works on cross axis (vertical in row direction).

Practice

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

easy

A. It controls the vertical alignment of items inside the container.

B. It changes the background color of the container.

C. It sets the font size of the items.

D. It adds space between items horizontally.

Solution

1. Step 1: Understand the role of align-items

   The align-items property is used inside flex or grid containers to control how items align vertically.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated CSS properties or effects, so they are incorrect.

3. Final Answer:

   It controls the vertical alignment of items inside the container. -> Option A

4. Quick Check:

   Vertical alignment = align-items [OK]

Hint: Align items = vertical alignment inside flex/grid [OK]

Common Mistakes:

• Confusing align-items with justify-content
• Thinking it changes colors or fonts
• Mixing horizontal and vertical alignment

2. Which of the following is the correct syntax to center items vertically in a flex container using align-items?

easy

A. align-items: justify;

B. align-items: middle;

C. align-items: vertical-center;

D. align-items: center;

Solution

1. Step 1: Recall valid align-items values

   Valid values include center, flex-start, flex-end, and stretch. center centers items vertically.

2. Step 2: Check each option

   Options A, B, and C are not valid CSS values for align-items.

3. Final Answer:

   align-items: center; -> Option D

4. Quick Check:

   Center vertically = align-items: center [OK]

Hint: Use 'center' exactly for vertical centering [OK]

Common Mistakes:

• Using 'middle' instead of 'center'
• Confusing justify-content with align-items
• Adding invalid values like 'vertical-center'

3. Given this CSS and HTML, what will be the vertical alignment of the items inside the flex container?

div.container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

medium

A. Items will be aligned at the bottom of the container.

B. Items will be stretched to fill the container height.

C. Items will be aligned at the top of the container.

D. Items will be centered vertically.

Solution

1. Step 1: Understand align-items: flex-end;

   This value aligns flex items to the bottom edge of the container vertically.

2. Step 2: Apply to container height

   The container is 200px tall, so items will appear at the bottom inside that space.

3. Final Answer:

   Items will be aligned at the bottom of the container. -> Option A

4. Quick Check:

   flex-end = bottom alignment [OK]

Hint: flex-end aligns items to bottom vertically [OK]

Common Mistakes:

• Thinking flex-end means top alignment
• Confusing align-items with justify-content
• Assuming items stretch by default

4. Identify the error in this CSS code that prevents vertical centering of flex items:

div.container {
  display: flex;
  align-items: center
  height: 150px;
}

medium

A. display: flex; should be display: block;.

B. Missing semicolon after align-items: center.

C. height property is invalid inside flex containers.

D. align-items cannot be used without justify-content.

Solution

1. Step 1: Check CSS syntax

   Each CSS property must end with a semicolon. The line align-items: center is missing a semicolon.

2. Step 2: Validate other properties

   display: flex; is correct, height is valid, and align-items works without justify-content.

3. Final Answer:

   Missing semicolon after align-items: center. -> Option B

4. Quick Check:

   CSS lines need semicolons [OK]

Hint: Always end CSS lines with semicolon [OK]

Common Mistakes:

• Forgetting semicolon after property
• Thinking height is invalid in flex
• Believing justify-content is required with align-items

5. You want a grid container where all items stretch vertically to fill their grid area, but one item should be aligned at the top instead. Which CSS setup achieves this?

div.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
div.grid > div.special {
  /* What to add here? */
}

hard

A. align-self: flex-start;

B. justify-self: flex-start;

C. align-self: start;

D. align-items: flex-start;

Solution

1. Step 1: Understand container and item alignment

   The container uses align-items: stretch; to stretch all items vertically by default.

2. Step 2: Override alignment for one item

   To override vertical alignment for a single grid item, use align-self. The correct value for top alignment is start, not flex-start (which is for flexbox).

3. Final Answer:

   align-self: start; -> Option C

4. Quick Check:

   Grid item top align = align-self: start [OK]

Hint: Use align-self: start for grid item top alignment [OK]

Common Mistakes:

• Using flex-start instead of start in grid
• Applying align-items on item instead of align-self
• Confusing justify-self with vertical alignment