Skip to main content

Flex

Gestisci il layout, l’allineamento e la dimensione delle colonne della griglia, della navigazione, dei componenti e altro ancora con le utility responsive dedicate alla flexbox. Per implementazioni più complesse, potrebbe essere necessario personalizzare il CSS.

Se sei poco pratico di flexbox, puoi iniziare da questa pratica guida su flexbox (in inglese) per informazioni di carattere generale, terminologia, linee guida, e frammenti di codice, oppure giocando con questo simpatico tutorial.

Abilita il comportamento flex

Applica le regole display per creare un contenitore flexbox e trasformare i suoi figli in elementi flex. Il contenitore flex e i suoi elementi potranno essere personalizzati con le ulteriori proprietà flex.

Io sono un contenitore flexbox!
<div class="d-flex p-2 bd-highlight">Io sono un contenitore flexbox!</div>
Io sono un contenitore inline flexbox!
<div class="d-inline-flex p-2 bd-highlight">Io sono un contenitore inline flexbox!</div>

Sono previste anche seguenti le varianti responsive per .d-flex e .d-inline-flex:

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Direzione

La direzione degli elementi flex è dettata dall’impostazione predefinita del browser. Tuttavia è possibile che si verifichino situazioni in cui è necessario impostare in modo esplicito questo valore, come ad esempio nei layout responsive.

Usa .flex-row per impostare la direzione orizzontale dell’elemento flex come quella predefinita dal browser. Oppure usa .flex-row-reverse per invertire la direzione del contenuto rispetto a quella predefinita.

Elemento flex 1
Elemento flex 2
Elemento flex 3
Elemento flex 1
Elemento flex 2
Elemento flex 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Elemento flex 1</div>
  <div class="p-2 bd-highlight">Elemento flex 2</div>
  <div class="p-2 bd-highlight">Elemento flex 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Elemento flex 1</div>
  <div class="p-2 bd-highlight">Elemento flex 2</div>
  <div class="p-2 bd-highlight">Elemento flex 3</div>
</div>

Usa .flex-column per impostare la direzione verticale, oppure .flex-column-reverse per far partire gli elementi dal lato opposto.

Elemento flex 1
Elemento flex 2
Elemento flex 3
Elemento flex 1
Elemento flex 2
Elemento flex 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Elemento flex 1</div>
  <div class="p-2 bd-highlight">Elemento flex 2</div>
  <div class="p-2 bd-highlight">Elemento flex 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Elemento flex 1</div>
  <div class="p-2 bd-highlight">Elemento flex 2</div>
  <div class="p-2 bd-highlight">Elemento flex 3</div>
</div>

Sono previste anche seguenti le varianti responsive per flex-direction:

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

Contenuto giustificato

Usa le utility justify-content col contenitore flexbox per cambiare l’allineamento dei suoi elementi flex rispetto all’asse orizzontale (l’asse x predefinito, l’asse y se flex-direction: column). Scegli tra start (predefinito dal browser), end, center, between o around.

Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Sono previste anche seguenti le varianti responsive per justify-content:

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

Allineamento elementi

Usa le utility align-items col contenitore flexbox per cambiare l’allineamento dei suoi elementi flex rispetto all’asse verticale (l’asse y predefinito, l’asse x se flex-direction: column). Scegli tra start, end, center, baseline o stretch (predefinito dal browser).

Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Sono previste anche seguenti le varianti responsive per align-items:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

Auto allineamento

Usa le utility align-self con i singoli elementi flex per cambiarne l’allineamento rispetto all’asse verticale (l’asse y predefinito, l’asse x se flex-direction: column). Scegli tra start, end, center, baseline o stretch (predefinito dal browser).

Elemento flex
Elemento flex allineato
Elemento flex
Elemento flex
Elemento flex allineato
Elemento flex
Elemento flex
Elemento flex allineato
Elemento flex
Elemento flex
Elemento flex allineato
Elemento flex
Elemento flex
Elemento flex allineato
Elemento flex
<div class="align-self-start">Elemento flex allineato</div>
<div class="align-self-end">Elemento flex allineato</div>
<div class="align-self-center">Elemento flex allineato</div>
<div class="align-self-baseline">Elemento flex allineato</div>
<div class="align-self-stretch">Elemento flex allineato</div>

Sono previste anche seguenti le varianti responsive per align-self:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

Margini automatici

Flexbox può fare cose meravigliose quando si mescolano gli allineamenti flessibili con i margini automatici. Di seguito sono mostrati tre esempi di controllo degli elementi flex tramite margini automatici: predefinito (nessun margine automatico), inserito con due elementi a destra (.mr-auto) e inserito con due elementi a sinistra (.ml-auto).

Sfortunatamente IE10 e IE11 non supportano correttamente i margini automatici sugli elementi flex quando il contenitore ha un valore dell’utility justify-content non predefinito.

Per maggiori dettagli, leggi questa risposta su StackOverflow.

Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Elemento flex</div>
  <div class="p-2 bd-highlight">Elemento flex</div>
  <div class="p-2 bd-highlight">Elemento flex</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Elemento flex</div>
  <div class="p-2 bd-highlight">Elemento flex</div>
  <div class="p-2 bd-highlight">Elemento flex</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Elemento flex</div>
  <div class="p-2 bd-highlight">Elemento flex</div>
  <div class="ml-auto p-2 bd-highlight">Elemento flex</div>
</div>

Con ‘align-items’

Spostare verticalmente un elemento flex in cima o in fondo a un contenitore mescolando align-items, flex-direction: column e margin-top: auto o margin-bottom: auto.

Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Elemento flex</div>
  <div class="p-2 bd-highlight">Elemento flex</div>
  <div class="p-2 bd-highlight">Elemento flex</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Elemento flex</div>
  <div class="p-2 bd-highlight">Elemento flex</div>
  <div class="mt-auto p-2 bd-highlight">Elemento flex</div>
</div>

Wrap

Cambia il modo con cui gli elementi flex si dispongono nel contenitore. Scegli da nessun wrap a tutto (predefinito dal browser) con .flex-nowrap, wrap con .flex-wrap o invertire il wrap con .flex-wrap-reverse.

Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex flex-nowrap">
  ...
</div>
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex flex-wrap">
  ...
</div>
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Sono previste anche seguenti le varianti responsive per flex-wrap:

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Ordinamento

Modifica l’ordine in visualizzazione di elementi flex specifici con l’utility order-. Sono disponibili le opzioni per il primo elemento o l’ultimo, come anche il reset dell’ordinamento DOM. Le classi order- sono accompagnate da un ordinale intero (1, 2, 3, e così via), per cui puoi creare delle classi personalizzate per aggiungere i valori di cui hai bisogno.

Primo elemento flex
Secondo elemento flex
Terzo elemento flex
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">Primo elemento flex</div>
  <div class="order-2 p-2 bd-highlight">Secondo elemento flex</div>
  <div class="order-1 p-2 bd-highlight">Terzo elemento flex</div>
</div>

Sono previste anche seguenti le varianti responsive per order:

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Align content

Usa le utility align-content sul contenitore flexbox per cambiare l’allineamento dei suoi elementi flex insieme all’asse verticale. Scegli tra start (predefinito dal browser), end, center, between, around o stretch. Per mostrare meglio il funzionamento di queste utility abbiamo forzato il contenitore con flex-wrap: wrap e aumentato il numero di elementi flex.

Heads up! Questa proprietà non ha effetto sulle singole righe di elementi flex.

Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex align-content-end flex-wrap">...</div>
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex align-content-center flex-wrap">...</div>
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex align-content-between flex-wrap">...</div>
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex align-content-around flex-wrap">...</div>
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
Elemento flex
<div class="d-flex align-content-stretch flex-wrap">...</div>

Sono previste anche seguenti le varianti responsive per align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch

Questo sito utilizza cookie tecnici, analytics e di terze parti.
Proseguendo nella navigazione accetti l’utilizzo dei cookie.

Privacy policy