Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Challenge: Flexbox in Action | Layout Basics
Tailwind CSS for Web Development

bookChallenge: Flexbox in Action

Task

Complete the provided HTML structure by filling in the missing Tailwind CSS classes according to the layout requirements.

  • Parent div: Set the display to flex, and arrange the items in a column;
  • Child divs: Center the items horizontally and vertically within the container.
index.html

index.html

copy

For the parent div,

  • Use flex to set an element to use Flexbox for its layout;
  • Use flex-col to place items in a column;
  • Use items-center to align items to the center;
  • Use justify-center to align items to the center.
index.html

index.html

copy

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 4

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Still meg spørsmål om dette emnet

Oppsummer dette kapittelet

Vis eksempler fra virkeligheten

Awesome!

Completion rate improved to 3.57

bookChallenge: Flexbox in Action

Sveip for å vise menyen

Task

Complete the provided HTML structure by filling in the missing Tailwind CSS classes according to the layout requirements.

  • Parent div: Set the display to flex, and arrange the items in a column;
  • Child divs: Center the items horizontally and vertically within the container.
index.html

index.html

copy

For the parent div,

  • Use flex to set an element to use Flexbox for its layout;
  • Use flex-col to place items in a column;
  • Use items-center to align items to the center;
  • Use justify-center to align items to the center.
index.html

index.html

copy

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 4
some-alt