Flexbox Layout in CSS
- Elemento Genitore (Container)
- La Proprietà flex-direction
- La Proprietà flex-wrap
- La Proprietà flex-flow
- La Proprietà justify-content
- La Proprietà align-items
- La Proprietà align-content
- Centrare Elementi
- Elementi Figlio (Items)
- La Proprietà order
- La Proprietà flex-grow
- La Proprietà flex-shrink
- La Proprietà flex-basis
- La Proprietà flex
- La Proprietà align-self
- Flexbox e Responsive Design
Il FlexBox Layout, rende più semplice progettare strutture flessibili e responsive per il layout senza utilizzare float o posizionamenti strani.
Elemento Genitore (Container)
L’elemento diventa un flexbox container flessibile impostando la proprietà di display su flex:
.container { display: flex;}
Da questo momento possiamo lavorare all’interno con elementi flessibili.
Le proprietà dei flex container sono:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
La Proprietà flex-direction
La proprietà flex-direction
definisce in quale direzione il contenitore vuole impilare gli elementi flessibili (items).
Il valore column impila gli items verticalmente (dall’alto al basso), mentre row in orizzontale. Ci sono poi le versioni inverse:
.container { display: flex; flex-direction: column | column-reverse | row | row-reverse;}
La Proprietà flex-wrap
La proprietà flex-wrap
specifica se gli elementi si devono adattare allo spazio disponibile e andare a capo o meno.
Il valore wrap specifica che gli elementi flessibili verranno rigirati se necessario:
.container { display: flex; flex-wrap: wrap | nowrap | wrap-reverse;}
La Proprietà flex-flow
La proprietà flex-flow
è una proprietà abbreviata per impostare insieme sia le proprietà flex-direction che flex-wrap.
.container { display: flex; flex-flow: row wrap;}
La Proprietà justify-content
La proprietà justify-content
è utilizzata per allineare gli elementi sull’asse principale:
.container { display: flex; justify-content: center | flex-start | flex-end | space-around | space-between | space-evenly;}
La Proprietà align-items
La proprietà align-items
è utilizzata per allineare gli elementi sull’asse secondario.
In questi esempi utilizziamo un contenitore di altezza 200 pixel, per mostrare meglio la proprietà align-items:
Il valore center allinea gli elementi flessibili al centro del contenitore:
.container { display: flex; height: 200px; align-items: center | flex-start | flex-end | stretch | baseline;}
La Proprietà align-content
La proprietà align-content
è utilizzata per allineare le linee tra gli elementi.
.container { display: flex; height: 600px; flex-wrap: wrap; align-content: center | flex-start | flex-end | space-around | space-between | space-evenly;}
Centrare Elementi
Per centrare gli elementi sia verticalmente che orizzontalmente bisogna usare sia la proprietà justify-content
che align-items
su center:
.container { display: flex; height: 300px; justify-content: center; align-items: center;}
Elementi Figlio (Items)
Gli elementi diretti figlio di un contenitore flessibile diventano automaticamente elementi flessibili (items flessibili).
L’elemento sopra rappresenta quattro elementi flessibili blu all’interno di un contenitore flessibile grigio.
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div></div>
Le proprietà degli elementi all’interno di un flex container sono:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
La Proprietà order
La proprietà order
specifica l’ordine degli elementi.
Il primo elemento flessibile nel codice non deve necessariamente apparire come il primo elemento nel layout.
Il valore order deve essere un numero, il valore predefinito è 0.
<div class="container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div></div>
La Proprietà flex-grow
La proprietà flex-grow specifica quanto un elemento flessibile crescerà rispetto agli altri elementi flessibili.
Il valore deve essere un numero, il valore predefinito è 0.
Fai sì che il terzo elemento flessibile cresca otto volte più velocemente degli altri elementi flessibili:
<div class="container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div></div>
La Proprietà flex-shrink
La proprietà flex-shrink
specifica quanto un elemento si restringerà rispetto agli altri elementi.
Il valore deve essere un numero, il valore predefinito è 1.
<div class="container"> <div>1</div> <div>2</div> <div style="flex-shrink: 0">3</div> <div>4</div></div>
La Proprietà flex-basis
La proprietà flex-basis
specifica la lunghezza iniziale di un elemento flessibile.
Impostiamo la lunghezza iniziale del terzo elemento flessibile a 200 pixel:
<div class="container"> <div>1</div> <div>2</div> <div style="flex-basis: 200px">3</div> <div>4</div></div>
La Proprietà flex
La proprietà flex
è una proprietà abbreviata per le proprietà flex-grow
, flex-shrink
e flex-basis
insieme.
<div class="container"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div></div>
La Proprietà align-self
La proprietà align-self
specifica l’allineamento per l’elemento selezionato all’interno del contenitore.
La proprietà align-self sovrascrive l’allineamento predefinito impostato dalla proprietà align-items del contenitore.
<div class="container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div></div>
Flexbox e Responsive Design
É possibile utilizzare flexbox insieme alle media query per creare layout responsive. Un classico esempio è la necessità di vedere gli elementi in orizzontale su Desktop, ma impilati verticalmente da mobile. Vediamo come fare:
.container { display: flex; flex-direction: column;}
/* Con schermi larghi minimo 800px mettiamo gli elementi in orizzontale */@media (min-width: 800px) { .container { flex-direction: row; flex-wrap: wrap; }}