Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Flexbox in Action | Layout Basics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
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

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 4

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

What are the exact Tailwind CSS classes I should add to the parent div?

Can you show me how the child divs should be structured with Tailwind classes?

Can you explain the difference between items-center and justify-center in this context?

bookChallenge: Flexbox in Action

Swipe to show menu

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

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 4
some-alt