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.
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.
Utilizzare .flex-column
per impostare una direzione verticale o .flex-column-reverse
per iniziare la direzione verticale dal lato opposto.
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
.
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).
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).
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.
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.
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, "riducendosi" per lasciare più spazio per l'elemento flessibile precedente con .w-100
.
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.
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
.
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
.
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.
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.
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