Cheat Sheet del layout CSS Flexbox

Il modello di layout Flexbox (Flexible Box) offre un modo più efficiente per allineare e distribuire gli elementi all’interno di un contenitore, anche quando le loro dimensioni sono sconosciute o dinamiche.

Contenitore Flex

Set on parent: display: flex; or display: inline-flex;

Proprietà	Descrizione	Valori Comuni
`flex-direction`	Direzione dell’asse principale	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Mandata a capo	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Shorthand per direzione e wrapping	`row wrap`
`justify-content`	Allineamento sull’asse principale	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	Allineamento sull’asse trasversale	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	Allineamento di più linee sull’asse trasversale	`flex-start`, `flex-end`, `center`, `space-between`, `stretch`

Elementi Flex

Set on children:

Proprietà	Descrizione	Predefinito
`order`	Ordine di disposizione (i valori più bassi vengono prima)	`0`
`flex-grow`	Fattore di crescita (quando c’è spazio)	`0`
`flex-shrink`	Fattore di contrazione (quando lo spazio scarseggia)	`1`
`flex-basis`	Dimensione base prima della distribuzione	`auto`
`flex`	Shorthand per grow, shrink e basis	`0 1 auto`
`align-self`	Permette un allineamento diverso per un singolo elemento	`auto`

Concetti Chiave

Asse Principale (Main Axis): Orizzontale per impostazione predefinita, definito da flex-direction.
Asse Trasversale (Cross Axis): La direzione perpendicolare all’asse principale.

Esempi di Scenari

Centratura orizzontale e verticale

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Distribuzione a larghezza uguale

.item {
  flex: 1; /* Occupa uniformemente lo spazio rimanente */
}

Allineamento Space Between

.navbar {
  display: flex;
  justify-content: space-between;
}