Flexbox abbreviata anche con flex è una tecnologia CSS che consente di avere contenitori flessibili su cui disporre i vari elementi della pagina web.

Nel corso delle lezioni successive ci soffermeremo molto su questo argomento attraverso tanti esempi pratici al fine di capirne meglio il funzionamento.

Quando si costruisce un contenitore utilizzando la tecnologia flexbox si imposta l’elemento padre (genitore) flessibile utilizzando la proprietà display: flex. Questa proprietà assieme ad altre, permettono di disporre gli elementi figli in maniera flessibile.

Esempio di utilizzo di flexbox

Facciamo un esempio di utilizzo di questo elemento ad esempio su un elemento div con 3 elementi figli:

<div class="flex-container">
   <div class="box red"></div>
   <div class="box blue"></div>
   <div class="box yellow"></div>
</div>

.flex-container {
  display: flex;
}

Di default i contenitori interni saranno posizionati uno accanto all’altro, piuttosto che uno sotto l’altro come si comporterebbe normalmente un elemento block.

Inoltre è possibile usare una serie di proprietà per tutti gli elementi figli, per cui la gestione di questi elementi diventa molto più semplice, rispetto alle precedenti tecnologie utilizzate in passato.

Infatti, si risolvono così alcune problematiche relative alla centratura degli elementi, alla loro disposizione sugli assi cartesiani x e y (definiti nel corso del nostro tutorial anche come asse principale e asse perpendicolare a seconda della direzione dei contenitori) e al dimensionamento dei box contenitori.

Dunque tutti i blocchi figli, contenuti all’interno del blocco flessibile padre, assumono la caratteristica di essere flessibili e su di essi le proprietà quali ad esempio float e clear non hanno effetto.

Proprietà dei flexbox

Ci sono proprietà che si applicano al contenitore e altre invece che si applicano ai box flessibili.

Quindi le proprietà che si applicano all’elemento contenitore sono:

Vedremo queste proprietà in dettaglio nel prossimo articolo.

Le proprietà che si possono invece applicare agli elementi figli sono:

Nelle prossime lezioni continueremo ancora a parlare di flexbox e introdurremo le proprietà che si applicano ai box flessibili.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive