Lezioni
Inizia
Inizia il corso
CodeGym /Corsi /Frontend SELF IT /Direzione degli assi

Direzione degli assi

Frontend SELF IT
Livello 17 , Lezione 2
Disponibile

6.1 Proprietà flex-direction

Flexbox offre strumenti flessibili e potenti per creare layout adattativi. Una parte importante di questo sistema sono gli assi di layout che determinano come gli elementi Flex saranno disposti all'interno del contenitore Flex. Di seguito esamineremo in dettaglio le proprietà flex-direction e flex-wrap, che controllano la direzione degli assi e il comportamento degli elementi Flex in caso di overflow.

La proprietà flex-direction definisce la direzione dell'asse principale lungo la quale saranno disposti gli elementi Flex. Questa direzione può essere orizzontale o verticale, così come diretta o inversa.

Valori:

  • row: l'asse principale va orizzontalmente da sinistra a destra (valore predefinito)
  • row-reverse: l'asse principale va orizzontalmente da destra a sinistra
  • column: l'asse principale va verticalmente dall'alto verso il basso
  • column-reverse: l'asse principale va verticalmente dal basso verso l'alto

Esempio di utilizzo

1. Elementi disposti orizzontalmente:

CSS 
    
      .container-row {
        display: flex;
        flex-direction: row;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-row-reverse {
        display: flex;
        flex-direction: row-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>

2. Elementi disposti verticalmente:

CSS 
    
      .container-column {
        display: flex;
        flex-direction: column;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-column-reverse {
        display: flex;
        flex-direction: column-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>

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

Spiegazione del codice:

  • .container-row: gli elementi sono disposti orizzontalmente da sinistra a destra
  • .container-row-reverse: gli elementi sono disposti orizzontalmente da destra a sinistra
  • .container-column: gli elementi sono disposti verticalmente dall'alto verso il basso
  • .container-column-reverse: gli elementi sono disposti verticalmente dal basso verso l'alto

6.2 Proprietà flex-wrap

La proprietà flex-wrap determina se gli elementi Flex verranno disposti su una nuova riga/colonna se non si adattano in una. Questo è particolarmente utile per creare layout adattativi dove la dimensione del contenitore può cambiare a seconda del dispositivo o dello schermo.

Valori

  • nowrap: gli elementi non si dispongono e restano su una singola riga/colonna (valore predefinito)
  • wrap: gli elementi si dispongono su una nuova riga/colonna quando necessario
  • wrap-reverse: gli elementi si dispongono su una nuova riga/colonna in ordine inverso

Esempi di utilizzo

Valore nowrap:

Gli elementi non si dispongono e restano su una singola riga/colonna (valore predefinito).

CSS 
    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
      </div>

Valore wrap:

Gli elementi si dispongono su una nuova riga/colonna quando necessario.

CSS 
    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
      </div>

Valore wrap-reverse:

Gli elementi si dispongono su una nuova riga/colonna in ordine inverso.

CSS 
    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
      </div>

Spiegazione del codice:

  • .container-nowrap: Gli elementi Flex sono disposti su una singola riga, anche se escono dai bordi del contenitore
  • .container-wrap: Gli elementi Flex si dispongono su una nuova riga se non si adattano a una singola
  • .container-wrap-reverse: Gli elementi Flex si dispongono su una nuova riga in ordine inverso

6.3 Uso di flex-direction e flex-wrap

Le proprietà flex-direction e flex-wrap possono essere combinate utilizzando la proprietà abbreviata flex-flow. Questa proprietà consente di impostare contemporaneamente la direzione dell'asse e il wrapping degli elementi.

Sintassi:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

Esempio di utilizzo:

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
        <div class="item">Elemento 5</div>
      </div>

Spiegazione del codice:

  • .container: Contenitore Flex con uso combinato di flex-direction: row; e flex-wrap: wrap;, il che significa che gli elementi sono disposti orizzontalmente e si dispongono su una nuova riga quando necessario
Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION