Flexbox : centrare gli elementi

Con Flexbox  il vecchio problema del  centraggio di un elemento ...

Con Flexbox  il vecchio problema del  centraggio di un elemento sia verticalmente che orizzontalmente viene risolto facilmente con sono solo tre righe di codice ( senza specificare la dimensione dell’elemento centrato ). Questa tecnica funziona con tutti i browser moderni: IE10 +, Chrome, Firefox e Safari .

Innanzitutto, creiamo un contenitore nel quale vogliamo che tutto sia centrato:

<div class=”container“><img src=”kenji.jpg” alt=”kenji agency” /></div>

Aggiungiamo le regole css:
.container{
        display: flex;
         justify-content: center;
         align-items: center;
 }

Ogni contenitore flexboxha due assi per gli elementi di posizionamento. L’asse principale è dichiarato con la proprietà flex-direction (può essere riga o colonna). Omettendo questa regola, abbiamo lasciato la direzione flessibile al suo valore di riga predefinito.

Ora dobbiamo fare è centrare entrambi gli assi:
justify-content definisce dove gli elementi flessibili si allineano in base all’asse principale (orizzontalmente nel nostro caso).
align-items fa lo stesso con l’asse perpendicolare a quello principale (verticalmente nel nostro caso).
Ora che abbiamo impostato le regole per l’allineamento verticale e orizzontale al centro, qualsiasi elemento aggiunto all’interno del contenitore sarà posizionato perfettamente al centro.

Conclusione
Esistono molte altre tecniche per centrare i contenuti con i CSS, ma la tecnologia Flexbox rende tutto molto più semplice ed elegante.

Kenji Agency : realizzazione siti web a Treviso