Il Flexbox in CSS

Il Flexbox è una tecnica di layout in CSS usata molto che rende molto più semplice disporre e allineare gli elementi all'interno di un contenitore. Con Flexbox, puoi scegliere come gli elementi si distribuiscono e si adattano in un'area, sia in orizzontale che in verticale, in modo flessibile.

Perché è importante Flexbox

Flexbox è importante perché rende molto più facile creare layout adattabili a tutti i diversi tipi di dispositivi, come computer e smartphone. Invece di dover usare molte righe complicate di codice, Flexbox permette di ottenere layout puliti e ben strutturati con meno codice.

Ad esempio, possiamo allineare quattro elementi con Flexbox in questo modo:

<div class="flex-container">
  <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>

<style>
.flex-container {
  display: flex;
  gap: 10px;
}
.flex-container > div {
  border: 1px solid black;
  width: 100%;
}
</style>

Nell'esempio, i quattro elementi vengono allineati usando solo 2 proprietà CSS:

display:flex per fare in modo di usare il Flexbox. Abbiamo parlato della proprietà display nella lezione sulla visibilità degli elementi.
gap:10px per aggiungere spazio tra gli elementi. È una proprietà simile al padding.

Come avrai visto, usare il Flexbox è molto più semplice rispetto all'utilizzo della proprietà float (che richiederebbe anche clear o overflow).

Differenza tra Flex container e Flex item

Una differenza importante da sapere è quella tra Flex container e Flex item:

Il Flex container è l'elemento HTML che contiene tutti gli elementi da allineare al suo interno e a cui dobbiamo applicare l'attributo display:flex.

<div class="flex-container">
  <!-- Elementi da allineare -->
</div>

<style>
.flex-container {
  display: flex;
}
</style>

I Flex item sono gli elementi contenuti all'interno del Flex container. Si adattano automaticamente allo spazio disponibile e possono essere ridimensionati, allineati e distribuiti in vari modi all'interno del container.

<div class="flex-container">
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

Nelle prossime due lezioni, vediamo quali proprietà e quali valori usare nel Flex container e nei Flex item.

Prova!Completa gli spazi vuoti con il testo appropriato.

/* Utilizza il Flexbox in CSS */
div.flex-container {
display: ;
background-color: red;
}