Salta al contenuto principale Passa alla navigazione dei documenti
Check
in English

Flettere

Gestisci rapidamente il layout, l'allineamento e il dimensionamento delle colonne della griglia, della navigazione, dei componenti e altro ancora con una suite completa di utility flexbox reattive. Per implementazioni più complesse, potrebbe essere necessario un CSS personalizzato.

Abilita comportamenti flessibili

Applica displayle utilità per creare un contenitore flexbox e trasforma gli elementi figlio diretti in elementi flessibili. I contenitori e gli articoli flessibili possono essere ulteriormente modificati con proprietà flessibili aggiuntive.

Sono un contenitore flexbox!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Sono un contenitore flexbox in linea!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Esistono anche variazioni reattive per .d-flexe .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
  • .d-xxl-flex
  • .d-xxl-inline-flex

Direzione

Imposta la direzione degli elementi flessibili in un contenitore flessibile con le utilità di direzione. Nella maggior parte dei casi puoi omettere la classe orizzontale qui poiché l'impostazione predefinita del browser è row. Tuttavia, potresti riscontrare situazioni in cui è necessario impostare in modo esplicito questo valore (come i layout reattivi).

Utilizzare .flex-rowper impostare una direzione orizzontale (impostazione predefinita del browser) o .flex-row-reverseper iniziare la direzione orizzontale dal lato opposto.

Elemento flessibile 1
Elemento flessibile 2
Elemento flessibile 3
Elemento flessibile 1
Elemento flessibile 2
Elemento flessibile 3
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Utilizzare .flex-columnper impostare una direzione verticale o .flex-column-reverseper iniziare la direzione verticale dal lato opposto.

Elemento flessibile 1
Elemento flessibile 2
Elemento flessibile 3
Elemento flessibile 1
Elemento flessibile 2
Elemento flessibile 3
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Esistono anche variazioni reattive 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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

Giustifica il contenuto

Utilizzare justify-contentle utilità sui contenitori flexbox per modificare l'allineamento degli elementi flessibili sull'asse principale (l'asse x per iniziare, l'asse y se flex-direction: column). Scegli tra start(impostazione predefinita del browser), end, center, between, aroundo evenly.

Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
<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>
<div class="d-flex justify-content-evenly">...</div>

Esistono anche variazioni reattive per justify-content.

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

Allinea gli elementi

Utilizzare align-itemsle utilità sui contenitori flexbox per modificare l'allineamento degli elementi flessibili sull'asse trasversale (l'asse y per iniziare, l'asse x se flex-direction: column). Scegli tra start, end, center, baselineo stretch(impostazione predefinita del browser).

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

Esistono anche variazioni reattive 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
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

Allinea se stesso

Utilizzare align-selfle utilità sugli elementi flexbox per modificare individualmente il loro allineamento sull'asse trasversale (l'asse y per iniziare, l'asse x se flex-direction: column). Scegli tra le stesse opzioni di align-items: start, end, center, baselineo stretch(impostazione predefinita del browser).

Articolo flessibile
Articolo flessibile allineato
Articolo flessibile
Articolo flessibile
Articolo flessibile allineato
Articolo flessibile
Articolo flessibile
Articolo flessibile allineato
Articolo flessibile
Articolo flessibile
Articolo flessibile allineato
Articolo flessibile
Articolo flessibile
Articolo flessibile allineato
Articolo flessibile
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Esistono anche variazioni reattive 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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

Riempire

Usa la .flex-fillclasse su una serie di elementi fratelli per forzarli in larghezze uguali al loro contenuto (o larghezze uguali se il loro contenuto non supera i loro riquadri di confine) occupando tutto lo spazio orizzontale disponibile.

Articolo flessibile con molti contenuti
Articolo flessibile
Articolo flessibile
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Esistono anche variazioni reattive per flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Cresci e rimpicciolisci

Usa .flex-grow-*le utilità per attivare o disattivare la capacità di un elemento flessibile di crescere per riempire lo spazio disponibile. Nell'esempio seguente, gli .flex-grow-1elementi utilizzano tutto lo spazio disponibile possibile, mentre lasciano ai restanti due elementi flessibili il loro spazio necessario.

Articolo flessibile
Articolo flessibile
Terzo articolo flessibile
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Usa .flex-shrink-*le utilità per attivare o disattivare la capacità di un elemento flessibile di ridursi se necessario. Nell'esempio seguente, il secondo elemento flessibile con .flex-shrink-1è forzato a racchiudere il suo contenuto in una nuova riga, "riducendosi" per lasciare più spazio per l'elemento flessibile precedente con .w-100.

Articolo flessibile
Articolo flessibile
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Esistono anche variazioni reattive per flex-growe flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{grow|shrink}-1

Margini automatici

Flexbox può fare cose davvero fantastiche quando mescoli gli allineamenti flessibili con i margini automatici. Di seguito sono riportati tre esempi di controllo degli elementi flessibili tramite margini automatici: impostazione predefinita (nessun margine automatico), spostamento di due elementi a destra ( .me-auto) e spostamento di due elementi a sinistra ( .ms-auto).

Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Con elementi di allineamento

Sposta verticalmente un elemento flessibile nella parte superiore o inferiore di un contenitore mescolando align-items, flex-direction: columne margin-top: autoo margin-bottom: auto.

Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
Articolo flessibile
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

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

Avvolgere

Cambia il modo in cui gli oggetti flessibili si avvolgono in un contenitore flessibile. Scegli tra nessun wrapping (impostazione predefinita del browser) con .flex-nowrap, wrapping con .flex-wrapo reverse wrapping con .flex-wrap-reverse.

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

Esistono anche variazioni reattive 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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

Ordine

Modifica l' ordine visivo di specifici elementi flessibili con una manciata di orderutilità. Forniamo solo opzioni per creare un articolo per primo o per ultimo, nonché un ripristino per utilizzare l'ordine DOM. Poiché orderaccetta qualsiasi valore intero da 0 a 5, aggiungi CSS personalizzato per eventuali valori aggiuntivi necessari.

Primo articolo flessibile
Secondo articolo flessibile
Terzo articolo flessibile
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Esistono anche variazioni reattive per order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

Inoltre ci sono anche classi reattive .order-firste che cambiano l' elemento di un elemento applicando e , rispettivamente..order-lastorderorder: -1order: 6

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

Allinea il contenuto

Utilizzare align-contentle utilità sui contenitori flexbox per allineare gli elementi flessibili insieme sull'asse trasversale. Scegli tra start(impostazione predefinita del browser), end, center, between, aroundo stretch. Per dimostrare queste utilità, abbiamo imposto flex-wrap: wrape aumentato il numero di elementi flessibili.

Dritta! Questa proprietà non ha effetto su righe singole di elementi flessibili.

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

Esistono anche variazioni reattive per align-content.

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

Oggetto multimediale

Stai cercando di replicare il componente dell'oggetto multimediale da Bootstrap 4? Ricrealo in pochissimo tempo con alcune utility flessibili che consentono ancora più flessibilità e personalizzazione rispetto a prima.

Placeholder Image
Questo è un contenuto di un componente multimediale. Puoi sostituirlo con qualsiasi contenuto e modificarlo secondo necessità.
html
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

E supponi di voler centrare verticalmente il contenuto accanto all'immagine:

Placeholder Image
Questo è un contenuto di un componente multimediale. Puoi sostituirlo con qualsiasi contenuto e modificarlo secondo necessità.
html
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass

API di utilità

Le utilità Flexbox sono dichiarate nella nostra API delle utilità in scss/_utilities.scss. Scopri come utilizzare l'API delle utilità.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),