📢 Nuovo Corso Laravel API disponibile!

Esercizi Flexbox CSS

Esplora come creare layout flessibili e reattivi utilizzando il flexbox in CSS. Pratica l’allineamento e la distribuzione degli elementi in modo dinamico per una presentazione ottimale del tuo contenuto.

Esercizio 1

Crea una pagina HTML con tre elementi `div`. Applica un flex container ai tre elementi in modo che siano disposti in riga.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 1</title>
<style>
.flex-container {
display: flex;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
</div>
</body>
</html>

Esercizio 2

Crea una pagina HTML con quattro elementi `div`. Applica un flex container ai quattro elementi in modo che siano disposti in colonna.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 2</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
<div class="flex-item">Elemento 4</div>
</div>
</body>
</html>

Esercizio 3

Crea una pagina HTML con cinque elementi `div`. Applica un flex container ai cinque elementi in modo che siano disposti in riga e allineati al centro.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 3</title>
<style>
.flex-container {
display: flex;
justify-content: center;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
<div class="flex-item">Elemento 4</div>
<div class="flex-item">Elemento 5</div>
</div>
</body>
</html>

Esercizio 4

Crea una pagina HTML con tre elementi. Applica un flex container ai tre elementi in modo che siano disposti in colonna e allineati al centro.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 4</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
</div>
</body>
</html>

Esercizio 5

Crea una pagina HTML con quattro elementi. Applica un flex container ai quattro elementi in modo che siano disposti in riga e allineati al centro verticalmente.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 5</title>
<style>
.flex-container {
display: flex;
align-items: center;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
<div class="flex-item">Elemento 4</div>
</div>
</body>
</html>

Esercizio 6

Crea una pagina HTML con cinque elementi. Applica un flex container ai cinque elementi in modo che siano disposti in colonna e allineati al centro orizzontalmente.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 6</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
justify-content: center;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
<div class="flex-item">Elemento 4</div>
<div class="flex-item">Elemento 5</div>
</div>
</body>
</html>

Esercizio 7

Crea una pagina HTML con quattro elementi. Applica un flex container ai quattro elementi in modo che siano disposti in riga e separati da uno spazio di 20 pixel.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 7</title>
<style>
.flex-container {
display: flex;
gap: 20px;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
<div class="flex-item">Elemento 4</div>
</div>
</body>
</html>

Esercizio 8

Crea una pagina HTML con cinque elementi. Applica un flex container ai cinque elementi in modo che siano disposti in colonna e separati da uno spazio di 10 pixel.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 8</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
<div class="flex-item">Elemento 4</div>
<div class="flex-item">Elemento 5</div>
</div>
</body>
</html>

Esercizio 9

Crea una pagina HTML con tre elementi. Applica un flex container ai tre elementi in modo che siano disposti in riga e allineati in fondo alla pagina.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 9</title>
<style>
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.flex-container {
display: flex;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
</div>
</body>
</html>

Esercizio 10

Crea una pagina HTML con quattro elementi. Applica un flex container ai quattro elementi in modo che siano disposti in colonna e allineati a destra.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 10</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.flex-item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Elemento 1</div>
<div class="flex-item">Elemento 2</div>
<div class="flex-item">Elemento 3</div>
<div class="flex-item">Elemento 4</div>
</div>
</body>
</html>