Flexbox Layout in CSS

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;
  }
}