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 display
le 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.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
Esistono anche variazioni reattive 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
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-row
per impostare una direzione orizzontale (impostazione predefinita del browser) o .flex-row-reverse
per iniziare la direzione orizzontale dal lato opposto.
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
Utilizzare .flex-column
per impostare una direzione verticale o .flex-column-reverse
per iniziare la direzione verticale dal lato opposto.
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">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
Giustifica il contenuto
Utilizzare justify-content
le 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
o around
.
<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>
Esistono anche variazioni reattive 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
Allinea gli elementi
Utilizzare align-items
le 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
, baseline
o stretch
(impostazione predefinita del browser).
<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
Allinea se stesso
Utilizzare align-self
le 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
, baseline
o stretch
(impostazione predefinita del browser).
<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
Riempire
Usa la .flex-fill
classe 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.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">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
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-1
elementi utilizzano tutto lo spazio disponibile possibile, mentre lasciano ai restanti due elementi flessibili il loro spazio necessario.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">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
.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
Esistono anche variazioni reattive per flex-grow
e 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
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 ( .mr-auto
) e spostamento di due elementi a sinistra ( .ml-auto
).
Sfortunatamente, IE10 e IE11 non supportano correttamente i margini automatici sugli elementi flessibili il cui genitore ha un justify-content
valore non predefinito. Vedi questa risposta StackOverflow per maggiori dettagli.
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">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: column
e margin-top: auto
o margin-bottom: auto
.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">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-wrap
o reverse wrapping con .flex-wrap-reverse
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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
Ordine
Modifica l' ordine visivo di specifici elementi flessibili con una manciata di order
utilità. Forniamo solo opzioni per creare un articolo per primo o per ultimo, nonché un ripristino per utilizzare l'ordine DOM. Poiché order
accetta qualsiasi valore intero (ad esempio, 5
), aggiungi CSS personalizzato per eventuali valori aggiuntivi necessari.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>
Esistono anche variazioni reattive 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
Allinea il contenuto
Utilizzare align-content
le utilità sui contenitori flexbox per allineare gli elementi flessibili insieme sull'asse trasversale. Scegli tra start
(impostazione predefinita del browser), end
, center
, between
, around
o stretch
. Per dimostrare queste utilità, abbiamo imposto flex-wrap: wrap
e aumentato il numero di elementi flessibili.
Dritta! Questa proprietà non ha effetto su righe singole di elementi flessibili.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<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