Allineamento sull'asse principale

7.1 Proprietà justify-content

Flexbox offre fantastici strumenti per gestire l'allineamento e la distribuzione dello spazio tra gli elementi all'interno del Flex-container. Una delle proprietà chiave per questo è justify-content, che gestisce l'allineamento degli elementi Flex lungo l'asse principale.

La proprietà justify-content determina come gli elementi Flex saranno distribuiti lungo l'asse principale del Flex-container. L'asse principale dipende dal valore della proprietà flex-direction:

• Se flex-direction ha il valore row o row-reverse, l'asse principale sarà orizzontale
• Se flex-direction ha il valore column o column-reverse, l'asse principale sarà verticale

Valori:

• flex-start: gli elementi sono allineati all'inizio del container (valore predefinito)
• flex-end: gli elementi sono allineati alla fine del container
• center: gli elementi sono allineati al centro del container
• space-between: gli elementi sono distribuiti uniformemente con spazi uguali tra di loro
• space-around: gli elementi sono distribuiti uniformemente con spazi ai bordi e tra di loro
• space-evenly: gli elementi sono distribuiti uniformemente con spazi uguali tra di loro e ai bordi del container

Esempio di utilizzo:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .flex-start {
        justify-content: flex-start;
      }
    
  

    
      <div class="container flex-start">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
    
  

7.2 Valori justify-content

1. flex-start

Con il valore flex-start gli elementi sono allineati all'inizio del Flex-container, quindi a sinistra se l'asse principale è orizzontale (row), o in alto se l'asse principale è verticale (column).

Esempio di utilizzo:

    
      .container {
        display: flex;
        justify-content: flex-start;
      }
    
  

    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
    
  

2. flex-end

Con il valore flex-end gli elementi sono allineati alla fine del Flex-container, quindi a destra se l'asse principale è orizzontale (row), o in basso se l'asse principale è verticale (column).

Esempio di utilizzo:

    
      .container {
        display: flex;
        justify-content: flex-end;
      }
    
  

    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
    
  

3. center

Con il valore center gli elementi sono allineati al centro del Flex-container. Questo valore è utile per creare layout centrati.

Esempio di utilizzo:

    
      .container {
        display: flex;
        justify-content: center;
      }
    
  

    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
    
  

4. space-between

Con il valore space-between gli elementi sono distribuiti uniformemente lungo l'asse principale con spazi uguali tra di loro. Il primo elemento è allineato all'inizio del container e l'ultimo elemento alla fine del container.

Esempio di utilizzo:

    
      .container {
        display: flex;
        justify-content: space-between;
      }
    
  

    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
    
  

5. space-around

Con il valore space-around gli elementi sono distribuiti uniformemente con spazi ai bordi e tra di loro. Gli spazi tra gli elementi saranno il doppio degli spazi ai bordi del container.

Esempio di utilizzo:

    
      .container {
        display: flex;
        justify-content: space-around;
      }
    
  

    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
    
  

6. space-evenly

Con il valore space-evenly gli elementi sono distribuiti uniformemente con spazi uguali tra di loro e ai bordi del container. Questo valore offre spazi uguali in tutto il container.

Esempio di utilizzo:

    
      .container {
        display: flex;
        justify-content: space-evenly;
      }
    
  

    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
    
  

7.3 Centrare il menù

Esempio di utilizzo in progetti reali — centraggio del menù di navigazione:

    
      .nav {
        display: flex;
        justify-content: center;
        background-color: #333;
        padding: 10px;
      }

      .nav-item {
        color: white;
        padding: 10px 20px;
        text-decoration: none;
      }

      .nav-item:hover {
        background-color: #575757;
      }
    
  

    
      <nav class="nav">
        <a href="#" class="nav-item">Home</a>
        <a href="#" class="nav-item">Chi siamo</a>
        <a href="#" class="nav-item">Servizi</a>
        <a href="#" class="nav-item">Contatti</a>
      </nav>
    
  

Spiegazione del codice:

• .nav: Flex-container per il menù di navigazione con allineamento al centro degli elementi
• .nav-item: Elementi Flex (link) con stili di base