Classi Flexbox in Bootstrap 5 | Spiegato
Questo articolo riguarda le lezioni di flex in Bootstrap 5 e i seguenti punti sono discussi in dettaglio
- Contenitori Flexbox
- Direzioni Flexbox
- Giustifica il contenuto
- Allinea gli articoli
- Lezioni di involucro
- Allineare il sé
Bootstrap 5 Flex Classi
D-flex
In bootstrap 5 i contenitori flessibili vengono creati utilizzando il .d-flex classe. d-flex Il contenitore di classe si espande alla piena larghezza, il che significa che si espande alla larghezza dello schermo, ma l'elemento in esso si espande in base al loro contenuto.
Codice
Box1
Box2
Box3
Box4
.D-*-Flex è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
D-inline-Flex
In bootstrap 5 i contenitori flessibili vengono creati utilizzando il .D-inline-Flex classe. D-inline-Flex Il contenitore di classe si espande in base al numero di articoli e agli elementi dell'area di contenuto coperti in esso.
Codice
Box1
Box2
Box3
Box4
.d-*-inline-flex è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Indicazioni flessibili
Flex-Rigo-Reverse
.Flex-Rigo-Reverse La classe viene utilizzata per cambiare la direzione degli elementi al contrario. Questa classe Flexbox viene utilizzata solo con il .riga classe. Questa classe verrà utilizzata anche con diversi punti di interruzione
Codice
Box1
Box2
Box3
Box4
.Flex-*-RIGUE-REVERSO è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Flex-Column
.Flex-Column La classe viene utilizzata per convertire le righe in colonne. Questa classe è anche utilizzata con il .riga classe.
Codice
Box1
Box2
Box3
Box4
.flex-*-colonna è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Flex-Column-Reverse
.Flex-Column-Reverse classe, convertire le righe in colonne e anche cambiare la direzione degli elementi flessibili al contrario. Questa classe è anche usata con .riga classe.
Codice
Box1
Box2
Box3
Box4
.Flex-*-REVERSO MOGNO è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Flex-wrap
.Flex-wrap La classe viene utilizzata per avvolgere gli elementi all'interno del contenitore e con questa classe viene gestito il sovrafoglio degli articoli Flex. Per impostazione predefinita gli elementi sono avvolti ma puoi comunque usare questa classe per avvolgere gli elementi che
trabocca il contenitore Flex.
Codice
Box1
Box2
Box3
Box4
.flex-*-avvolgimento è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Flex-Nowrap
.Flex-Nowrap La classe viene utilizzata in cui non si desidera che i tuoi articoli flessibili siano avvolti perché per impostazione predefinita gli articoli Flex sono avvolti all'interno del contenitore Flex a causa del suo comportamento reattivo in modo da poter utilizzare la classe Flex-Nowrap per scartare i tuoi articoli.
Codice
Box1
Box2
Box3
Box4
.Flex-*-NowRap è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Flex-wrap-reverse
.Flex-wrap-reverse La classe non viene utilizzata solo per avvolgere gli oggetti flex all'interno di un contenitore, ma anche invertire il loro ordine.
Codice
Box1
Box2
Box3
Box4
.Flex-*-avvolgimento è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Flex-riempimento
.Flex-riempimento La classe viene utilizzata solo con il .Classe Col senza alcun punto di interruzione o larghezza. La classe Flex-Fill prende la larghezza del 100% del contenitore e costringe gli altri elementi flessibili a dividere lo spazio equamente. La classe Flex-Fill può essere applicata su più elementi flessibili e solo sugli articoli Flex.
Codice
Box1
Box2
Box3
Box4
.Flex-*-Riempi è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Giustifica il contenuto
Le classi di contenuto di giustificare vengono utilizzate per giustificare gli elementi flessibili in una direzione di riga o in altre parole lungo l'asse principale.
Giustify-Content-Start
.Giustify-Content-Start classe, sposta gli oggetti flessibili sul lato sinistro del contenitore. Questa classe viene utilizzata solo con il .Classe D-Flex.
Codice
Box1
Box2
Box3
Box4
Box5
.Giustify-Content-*-Inizia è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Giustificare il contenuto-end
.giustificare il contenuto-end classe, sposta gli oggetti flessibili sul lato destro del contenitore. Questa classe viene utilizzata solo con il .d-flex classe.
Codice
Box1
Box2
Box3
Box4
Box5
.Justify-Content-*-fine è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Justify-Content-Center
.Justify-Content-Center classe, raccogli tutti gli articoli flessibili al centro del contenitore. Questa classe viene utilizzata solo con il .d-flex classe.
Codice
Box1
Box2
Box3
Box4
Box5
.Justify-Content-*-Centro è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Giustifica il contenuto di mezzo
.Giustifica il contenuto di mezzo La classe viene utilizzata per posizionare spazi tra gli articoli flessibili. Questa classe pone il primo elemento Flex all'inizio del contenitore e l'ultimo elemento Flex alla fine del contenitore e divide tutto lo spazio equamente tra gli articoli Flex rimanenti .Questa classe viene utilizzata solo con il .d-flex classe.
Codice
Box1
Box2
Box3
Box4
Box5
.Giustify-Content-*-tra è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Giustifica il contenuto
.Giustifica il contenuto La classe viene utilizzata per dividere lo spazio equamente tra tutti gli elementi flessibili. Questa classe viene utilizzata solo con il .d-flex classe.
Codice
Box1
Box2
Box3
Box4
Box5
.Giustify-Content-*-intorno è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Allineare il contenuto
Allineare le classi di contenuto vengono utilizzate per allineare il contenuto nella direzione della colonna o in altre parole solo lungo l'asse incrociato. Per allineare gli articoli flessibili, utilizzare il .Classe D-Flex con il .Flex-wrap classe.
Allinee-Items-Start
.Allinee-Items-Start classe, allinea gli articoli flessibili nella parte superiore del contenitore.
Codice
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.align-Items-*-Inizia è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
E-end-end
.e-end-end classe, allinea gli elementi flessibili nella parte inferiore del contenitore.
Codice
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.align-items-*-fine è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Allineare-utems-center
.allineare-utems-center classe, centrati verticalmente gli articoli flessibili in un contenitore.
Codice
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
Box10
Box11
Box12
.align-items-*-Centro è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Allinea-Items-Baseline
.Allinea-Items-Baseline classe, allinea il contenuto nelle caselle secondo l'asse principale a causa di cui gli elementi del contenitore si allineano automaticamente nella direzione verticale.
Codice
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
.align-Items-*-Baseline è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Allinea-Items-stretch
.Allinea-Items-stretch classe, espandi gli articoli flessibili in verticale in base all'altezza del contenitore.
Codice
Box1
Box2
Box3
Box4
.ALIGN-ITEMS-*-STRATCH è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso dei punti di interruzione rende anche questa classe reattiva per altri schermi.
Allineare il sé
.allinearsi La classe è proprio come .allineare classe ma la differenza tra le due classi è .ALIGE-ETIMS viene applicato sul contenitore Flex e tratta tutti gli articoli Flex con la stessa classe utilizzata dal contenitore Flex in quel momento, ma il .allinearsi La classe viene applicata su un oggetto flessibile singolo e tratta un singolo elemento flessibile.
Di seguito sono riportati .Classi di allineate che vengono utilizzate su articoli flessibili
- .Allinea-Start
- .allineare da sé
- .allineare-se stesso
- .allineare-sé-baseline
- .Allinea-Stich-stretch
.allineare-sé-*-start/end/centrale/basale/allungamento è anche usato con i punti di interruzione, basta sostituire il (*) simbolo con xxl, xl, lg, md o sm. L'uso di breakpoint rende queste classi reattive anche per altri schermi.
Conclusione
Le classi Flexbox vengono utilizzate con la classe D-Flex in Bootstrap 5 per giustificare, allineare e gestire il contenuto nelle righe o nelle colonne. Nell'articolo sopra le classi di contenitori flessibili, lezioni di indicazioni flessibili, lezioni di avvolgimento, lezioni di giustificazione di flessioni per giustificare gli articoli in una riga, le classi di allineamento flessibili per allineare il contenuto in colonna e le classi per allineare gli articoli stessi sono discussi in dettaglio.