Home esercizi css flexbox

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>