Flexbox, contenitori flessibili nei CSS, flexbox CSS

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.