Centrare elementi flessibili

Il primo caso d'uso in cui il flexbox si rivela una soluzione immediata e ideale è quello della centratura di elementi contenuti all'interno di un box flessibile. Il discorso è valido non solo per la centratura orizzontale ma anche per la più complessa, con altri mezzi, centratura verticale.

Se vogliamo centrare orizzontalmente un elemento basterà:

1. impostare display: flex per il box contenitore;
2. usare il valore center per la proprietà justify-content sullo stesso box.

Non è quindi necessario intervenire con regole speciali sull'elemento che si intende centrare.

Se vogliamo centrare verticalmente un elemento invece dovremo:

• assegnare un'altezza (con height o min-height) al box contenitore;
• definire per esso display: flex;
• centrare impostando su center il valore della proprietà align-items.

Combinando le proprietà possiamo far sì che che un box contenuto in un elemento flex sia centrato sia orizzontalmente sia verticalmente.

Nella prima demo abbiamo creato un header con all'interno un box per il logo:

<header class="main-header">
 <div class="logo">
  <h1 class="logo-heading">The Flexbox</h1>
 </div>
</header>

Il CSS è dei più semplici. Come si vede è sufficiente agire sull'elemento header.main-header senza toccare il div.logo per centrare quest'ultimo sui due assi orizzontale e verticale:

.main-header {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	height: 160px;
	background-color: #004480;
}