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

Contenuti del Corso

Tailwind CSS for Web Development

Tailwind CSS for Web Development

1. Introduction and Setup
2. Core Concepts and Basic Styling
3. Building Basic Components
4. Layout Basics
5. Responsiveness and Customization

book
Challenge: 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.
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.
html

index.html

copy

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 4
Siamo spiacenti che qualcosa sia andato storto. Cosa è successo?
some-alt