Esercizi Flexbox CSS
Codegrind Team•Jul 16 2023
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>