Bootstrap 5 Flex

Riquadro flessibile

La differenza principale tra Bootstrap 3 e Bootstrap 4 & 5 è che Bootstrap 5 utilizza flexbox invece di flottaggi per gestire i layout.

Il modulo di layout di scatola flessibile, che ti permette di progettare più facilmente strutture di layout responsive senza utilizzare flottaggi o posizionamento.

Se non sei familiare con flex, puoi trovare ulteriori informazioni nel nostro Guida CSS Flexbox impara.

Nota:IE9 e versioni precedenti non supportano Flexbox.

Nota:Se hai bisogno di supporto per IE8-9, utilizza Bootstrap 3. È la versione più stabile di Bootstrap, il team continua a supportarla per correzioni di errori critici e modifiche ai documenti. Tuttavia, non verranno aggiunte nuove funzionalità.

Esempio

Per creare un contenitore flexbox e convertire direttamente i figli in elementi flex, utilizzare d-flex Classe:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Elemento flessibile 1</div>
  <div class="p-2 bg-warning">Elemento flessibile 2</div>
  <div class="p-2 bg-primary">Elemento flessibile 3</div>
</div>

Prova da solo

Esempio

Per creare un contenitore flexbox inline, utilizzare d-inline-flex Classe:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Elemento flessibile 1</div>
  <div class="p-2 bg-warning">Elemento flessibile 2</div>
  <div class="p-2 bg-primary">Elemento flessibile 3</div>
</div>

Prova da solo

Direzione orizzontale

usare .flex-row Visualizzare gli elementi elastici in orizzontale (in parallelo). Questo è l'impostazione predefinita.

Suggerimento:usa .flex-row-reverse Puoi allineare a destra nella direzione orizzontale:

Esempio

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Elemento flessibile 1</div>
  <div class="p-2 bg-warning">Elemento flessibile 2</div>
  <div class="p-2 bg-primary">Elemento flessibile 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Elemento flessibile 1</div>
  <div class="p-2 bg-warning">Elemento flessibile 2</div>
  <div class="p-2 bg-primary">Elemento flessibile 3</div>
</div>

Prova da solo

Direzione verticale

usare .flex-column Visualizzare gli elementi flex in verticale (stivati uno sopra l'altro), o utilizzare .flex-column-reverse Invertire la direzione verticale:

Esempio

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Elemento flessibile 1</div>
  <div class="p-2 bg-warning">Elemento flessibile 2</div>
  <div class="p-2 bg-primary">Elemento flessibile 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Elemento flessibile 1</div>
  <div class="p-2 bg-warning">Elemento flessibile 2</div>
  <div class="p-2 bg-primary">Elemento flessibile 3</div>
</div>

Prova da solo

Allinea il contenuto

usa .justify-content-* La classe può modificare il metodo di allineamento degli elementi elastici. Le classi valide sono:

  • start(predefinito)
  • end
  • center
  • between
  • around

Esempio

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

Prova da solo

Larghezza uguale

usare su un elemento flex .flex-fill Puoi forzarli a essere della stessa larghezza:

Esempio

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Elemento elastico 1</div>
  <div class="p-2 bg-warning flex-fill">Elemento elastico 2</div>
  <div class="p-2 bg-primary flex-fill">Elemento elastico 3</div>
</div>

Prova da solo

Estendere

usare su un elemento flex .flex-grow-1 Può utilizzare lo spazio in eccesso. Nell'esempio seguente, i primi due elementi flex occupano lo spazio necessario, mentre l'ultimo elemento occupa lo spazio disponibile rimanente:

Esempio

<div class="d-flex">
  <div class="p-2 bg-info">Elemento flessibile 1</div>
  <div class="p-2 bg-warning">Elemento flessibile 2</div>
  <div class="p-2 bg-primary flex-grow-1">Elemento flessibile 3</div>
</div>

Prova da solo

Suggerimento:usare su un elemento flex .flex-shrink-1 può contrarsi se necessario.

Ordine

usa .order Le classi possono modificare l'ordine visivo di un determinato elemento flex. Le classi valide vanno da 0 a 5, con il numero più basso che ha la priorità più alta (order-1 viene visualizzato prima di order-2, ecc.):

Esempio

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Elemento flessibile 1</div>
  <div class="p-2 bg-warning order-2">Elemento flessibile 2</div>
  <div class="p-2 bg-primary order-1">Elemento flessibile 3</div>
</div>

Prova da solo

margini esterni automatici

usa .ms-auto(spingendo il progetto a destra) o usa .me-auto(spingendo il progetto a sinistra) Aggiungi facilmente margini automatici agli elementi flessibili:

Esempio

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Elemento flessibile 1</div>
  <div class="p-2 bg-warning">Elemento flessibile 2</div>
  <div class="p-2 bg-primary">Elemento flessibile 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Elemento flessibile 1</div>
  <div class="p-2 bg-warning">Elemento flessibile 2</div>
  <div class="p-2 me-auto bg-primary">Elemento flessibile 3</div>
</div>

Prova da solo

Rimescola

attraverso .flex-nowrap(predefinito),.flex-wrap o .flex-wrap-reversecontrolla come gli elementi flex si impacchettano nel contenitore flex.

Esempio

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

Prova da solo

Allinea il contenuto

usare .align-content-* Controlla l'allineamento verticale degli elementi flessibili. Le classi valide sono:

  • .align-content-start(predefinito)
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch

Nota:Queste classi non hanno alcun effetto sugli elementi flessibili in riga singola.

Fare clic sul pulsante sottostante per vedere la differenza tra le cinque classi: cliccare per cambiare l'allineamento verticale degli elementi flessibili nella casella di esempio.

Esempio

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

Prova da solo

Allinea gli elementi

usare .align-items-* controllo delle classiriga singolamodalità di allineamento verticale degli elementi flessibili. Le classi valide sono:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch(predefinito)

Fare clic sul pulsante sottostante per vedere la differenza tra le cinque classi:

Esempio

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

Prova da solo

allineamento automatico

usare .align-self-* controllo delle classispecificare l'elemento flessibilemodalità di allineamento verticale.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch(predefinito)

Clicca sul pulsante sottostante per vedere la differenza tra le cinque classi:

Esempio

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Elemento Flex 1</div>
  <div class="p-2 border align-self-start">Elemento Flex 2</div>
  <div class="p-2 border">Elemento Flex 3</div>
</div>

Prova da solo

Classi Flex Responsimili

Tutte le classi elastiche hanno classi di risposta aggiuntive, il che rende facile impostare classi flex specifiche per dimensioni di schermo specifiche.

* può essere sostituito da sm, md, lg, xl o xxl, che rappresentano rispettivamente piccolo, medio, grande, molto grande e extra grande schermo.

Cerca la classe elastica specifica ..

Classe Descrizione Esempio
Contenitore elastico
.d-*-flex Crea contenitori flexbox per diversi schermi. Prova
.d-*-inline-flex Crea contenitori flexbox in riga per diversi schermi. Prova
Direzione
.flex-*-row Visualizza orizzontalmente gli elementi flessibili su diversi schermi. Prova
.flex-*-row-reverse Visualizza orizzontalmente e a destra gli elementi flessibili su diversi schermi. Prova
.flex-*-column Visualizza verticalmente gli elementi flessibili su diversi schermi. Prova
.flex-*-column-reverse Visualizza verticalmente gli elementi flessibili in ordine inverso su diversi schermi. Prova
Contenuto allineato in riga
.justify-content-*-start Visualizza gli elementi flessibili dall'inizio (a sinistra) su diversi schermi. Prova
.justify-content-*-end Visualizza gli elementi flessibili alla fine (a destra) su diversi schermi. Prova
.justify-content-*-center Visualizza gli elementi flessibili al centro del contenitore elastico su diversi schermi. Prova
.justify-content-*-between Visualizza uniformemente gli elementi flessibili su diversi schermi. Prova
.justify-content-*-around Visualizza gli elementi flessibili 'intorno' su diversi schermi. Prova
Riempimento / Larghezza uguale
.flex-*-fill Obbliga gli elementi flessibili a avere la stessa larghezza su diversi schermi. Prova
Estendi
.flex-*-grow-0 Non far estendere gli elementi su diversi schermi.
.flex-*-grow-1 Estendi gli elementi in modo diverso su diversi schermi.
Riduci
.flex-*-shrink-0 Non permettere agli elementi di restringersi sui diversi schermi.
.flex-*-shrink-1 Retti gli elementi sui diversi schermi.
Ordine
.order-*-0-12 Cambia l'ordine da 0 a 12 sui schermi piccoli. Prova
Rimescola
.flex-*-nowrap Non rimescola gli elementi sui diversi schermi. Prova
.flex-*-wrap Rimescola gli elementi sui diversi schermi. Prova
.flex-*-wrap-reverse Inverti il riempimento delle righe degli elementi sui diversi schermi. Prova
Allinea il contenuto
.align-content-*-start Allinea gli elementi dall'inizio sui diversi schermi. Prova
.align-content-*-end Allinea gli elementi alla fine dei diversi schermi. Prova
.align-content-*-center Allinea gli elementi al centro dei diversi schermi. Prova
.align-content-*-around Allinea gli elementi intorno ai diversi schermi. Prova
.align-content-*-stretch Estendi gli elementi sui diversi schermi. Prova
Allinea gli elementi
.align-items-*-start Allinea gli elementi su una riga dall'inizio sui diversi schermi. Prova
.align-items-*-end Allinea gli elementi su una riga alla fine dei diversi schermi. Prova
.align-items-*-center Allinea gli elementi su una riga al centro dei diversi schermi. Prova
.align-items-*-baseline Allinea gli elementi su una riga sui livelli di base dei diversi schermi. Prova
.align-items-*-stretch Estendi gli elementi su una riga sui diversi schermi. Prova
Allinea sé stesso
.align-self-*-start Allinea gli elementi elastiche dall'inizio sui diversi schermi. Prova
.align-self-*-end Allinea gli elementi elastiche alla fine dei diversi schermi. Prova
.align-self-*-center Allinea gli elementi elastiche al centro dei diversi schermi. Prova
.align-self-*-baseline Allinea gli elementi elastiche sui livelli di base dei diversi schermi. Prova
.align-self-*-stretch Estendi gli elementi elastiche sui diversi schermi. Prova