Allineamento sull'asse trasversale

8.1 Proprietà align-items

Le proprietà align-items e align-self permettono di allineare gli elementi Flex sull'asse trasversale, garantendo flessibilità e precisione nel layout.

La proprietà align-items gestisce l'allineamento degli elementi Flex sull'asse trasversale (perpendicolare all'asse principale) all'interno del contenitore Flex. L'asse trasversale dipende dal valore della proprietà flex-direction:

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

Valori:

• stretch: gli elementi si allungano per riempire il contenitore (valore predefinito)
• flex-start: gli elementi sono allineati all'inizio del contenitore
• flex-end: gli elementi sono allineati alla fine del contenitore
• center: gli elementi sono allineati al centro del contenitore
• baseline: gli elementi sono allineati alla linea di base del testo

Esempio di utilizzo:

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

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

      .align-stretch {
        align-items: stretch;
      }

      .align-flex-start {
        align-items: flex-start;
      }
    
  

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

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

8.2 Proprietà align-self

La proprietà align-self consente di sovrascrivere il valore di align-items per un elemento Flex specifico. Questa proprietà si applica direttamente all'elemento Flex e ne controlla l'allineamento sull'asse trasversale all'interno del contenitore Flex.

Valori:

• auto: il valore è ereditato dal genitore (predefinito)
• stretch: l'elemento si allunga per riempire il contenitore
• flex-start: l'elemento è allineato all'inizio del contenitore
• flex-end: l'elemento è allineato alla fine del contenitore
• center: l'elemento è allineato al centro del contenitore
• baseline: l'elemento è allineato alla linea di base del testo

Esempio di utilizzo:

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

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

      .self-flex-end {
        align-self: flex-end;
      }

      .self-center {
        align-self: center;
      }

      .self-baseline {
        align-self: baseline;
      }
    
  

    
      <div class="container">
        <div class="item self-flex-end">Elemento 3</div>
        <div class="item self-center">Elemento 4</div>
        <div class="item self-baseline">Elemento 5</div>
      </div>
    
  

Spiegazione del codice:

• .self-flex-end: questo elemento è allineato al bordo inferiore del contenitore
• .self-center: questo elemento è allineato al centro verticalmente
• .self-baseline: questo elemento è allineato alla linea di base del testo

8.3 Centraggio degli elementi

Flexbox consente di centrare facilmente gli elementi sia verticalmente che orizzontalmente, utilizzando una combinazione di justify-content e align-items o align-self.

Esempio di utilizzo:

    
      .center-container {
        display: flex;
        justify-content: center; /* centraggio orizzontale */
        align-items: center; /* centraggio verticale */
        height: 300px;
        border: 2px solid #000;
      }

      .center-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
      }
    
  

    
      <div class="center-container">
        <div class="center-item">Elemento centrato</div>
      </div>
    
  

Spiegazione del codice:

• .center-container: Contenitore Flex in cui gli elementi sono centrati orizzontalmente con justify-content: center; e verticalmente con align-items: center;
• .center-item: Elemento Flex che è allineato al centro del contenitore