MP Web Studio
CSS100 of 100 available
52 / 100

LESSON 52 OF 100

Change the axis to a column

Arrange card content from top to bottom.

Official sourceW3C CSS Flexbox — flex-directionReviewed: 2026-08-26
STEP 1 · LEARN

How it works

flex-direction defines the main-axis direction. column starts at block-start and lays items out vertically without changing their semantic HTML order.

Correct example
.card { display: flex; flex-direction: column; }

The heading, text and action form a vertical stack.

Common mistake
.card { display: flex; flex-direction: row; }

row keeps the main axis in the inline direction and does not build the requested column.

STEP 2 · APPLY

Your exercise

Enable Flexbox and set the card direction to column.

STEP 3 · BUILD

Write and see the result

index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The card is a flex container.
  • The main axis uses column.
  • The target element is present in the page.
Explain the solution logic

display: flex creates the container, while flex-direction: column moves the main axis vertically.