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.
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Flexbox Utilities - Task</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div
class="_____ _____ _____ _____ bg-red-100"
style="height: 200px"
>
<div class="p-4 bg-blue-500">Item 1</div>
<div class="p-4 bg-green-500">Item 2</div>
</div>
</body>
</html>
For the parent div,
Use
flexto set an element to use Flexbox for its layout;Use
flex-colto place items in a column;Use
items-centerto align items to the center;Use
justify-centerto align items to the center.
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Flexbox Utilities - Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div
class="flex flex-col items-center justify-center bg-red-100"
style="height: 200px"
>
<div class="p-4 bg-blue-500">Item 1</div>
<div class="p-4 bg-green-500">Item 2</div>
</div>
</body>
</html>
Alt var klart?
Takk for tilbakemeldingene dine!
Seksjon 4. Kapittel 4
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
