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.
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.
<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-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
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.
<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-columnper impostare una direzione verticale o .flex-column-reverseper 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
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, betweeno 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
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).
<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
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).
<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
Usa la .flex-fillclasse su una serie di elementi fratelli per forzarli in larghezze uguali occupando tutto lo spazio orizzontale disponibile. Particolarmente utile per la navigazione a larghezza uguale o giustificata.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</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
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.
<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 ad avvolgere il suo contenuto in una nuova riga, "rimpicciolendosi" 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-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
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-contentvalore 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>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.
<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>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.
<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
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 (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
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.
<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-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