Fondamenti di Flexbox

5.1 Concetti di base di Flexbox

Flexbox (Flexible Box Layout) è un potente sistema di layout CSS che offre modi flessibili ed efficienti per distribuire lo spazio e allineare gli elementi all'interno di un contenitore. Flexbox è particolarmente utile per creare layout complessi e design responsivi. Ora esamineremo i fondamenti di Flexbox, inclusa la creazione di container e elementi Flex, oltre all'uso della proprietà display: flex;.

Concetti di base di Flexbox

Flexbox è composto da due componenti chiave:

• Contenitore Flex: l'elemento genitore che include elementi Flex.
• Elementi Flex: gli elementi figli all'interno del contenitore Flex che vengono allineati e distribuiti secondo le regole di Flexbox.

Contenitore Flex

Il contenitore Flex viene creato utilizzando la proprietà display: flex; o display: inline-flex;. Il contenitore Flex gestisce il posizionamento degli elementi figli (elementi Flex) e offre numerose possibilità per il loro allineamento e distribuzione.

    
      .container {
        display: flex; /* o inline-flex */
      }
    
  

Esempio di utilizzo:

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

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

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

Spiegazione del codice:

• .container: contenitore Flex creato con display: flex;. All'interno di questo contenitore, gli elementi vengono allineati e distribuiti secondo le regole di Flexbox
• .item: gli elementi Flex che sono gli elementi figli del contenitore Flex

5.2 Proprietà del contenitore Flex

La proprietà display: flex; definisce un elemento come contenitore Flex. Gli elementi figli di questo contenitore diventano automaticamente elementi Flex e iniziano a seguire le regole di Flexbox.

display: flex;

Crea un contenitore Flex a blocco. Il contenitore Flex si comporta come un elemento a blocco, occupando tutta la larghezza disponibile dell'elemento genitore.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Crea un contenitore Flex in linea. Il contenitore Flex si comporta come un elemento in linea, occupando solo la larghezza necessaria e può essere posizionato accanto ad altri elementi in linea.

    
      .inline-container {
        display: inline-flex;
      }
    
  

Esempio di utilizzo:

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

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

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

      <div class="inline-container">
        <div class="item">Elemento 4</div>
        <div class="item">Elemento 5</div>
      </div>
    
  

Spiegazione del codice:

• inline-container — è un contenitore Flex creato con display: inline-flex;. All'interno di questo contenitore, gli elementi si allineano e si distribuiscono secondo le regole di Flexbox. I contenitori si comportano come elementi in linea e si posizionano uno accanto all'altro.

5.3 Proprietà degli elementi Flex

1. La proprietà flex è una scorciatoia per impostare flex-grow, flex-shrink e flex-basis. Permette di gestire come gli elementi Flex si espandono e si contraggono per riempire lo spazio disponibile.

Sintassi:

    
      .element {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

Esempio di utilizzo:

    
      .item {
        flex: 1;
      }
    
  

2. Proprietà order

La proprietà order definisce l'ordine in cui gli elementi Flex sono disposti all'interno del contenitore Flex. Di default, tutti gli elementi hanno il valore order: 0;.

Valori

Numeri interi. Gli elementi con un valore inferiore vengono posizionati prima degli elementi con un valore maggiore.

Sintassi:

    
      .element {
        order: value;
      }
    
  

Esempio di utilizzo:

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

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

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

Spiegazione del codice:

• .item-1: ha il valore order: 2, quindi verrà posizionato dopo l'elemento con order: 1
• .item-2: ha il valore order: 1, quindi verrà posizionato per primo
• .item-3: ha il valore order: 3, quindi verrà posizionato per ultimo