Flexbox -klasser i Bootstrap 5 | Forklart
Denne artikkelen handler om flex -klasser i Bootstrap 5 og følgende punkter blir diskutert detaljert
- Flexbox containere
- Flexbox -retninger
- Rettferdiggjøre innhold
- Juster gjenstander
- Innpakningskurs
- Juster meg selv
Bootstrap 5 Flex -klasser
D-flex
I bootstrap 5 opprettes flexbeholdere ved å bruke .d-flex klasse. d-flex Klassebeholder utvides til full bredde, noe som betyr at den utvides til bredden på skjermen, men varen i det utvides i henhold til innholdet deres.
Kode
Boks1
Box2
Boks3
Boks4
.D-*-Flex brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
D-inline-flex
I bootstrap 5 opprettes flexbeholdere ved å bruke .D-inline-flex klasse. D-inline-flex Klassebeholder utvides i henhold til antall elementer og innholdsområdet som dekkes i det.
Kode
Boks1
Box2
Boks3
Boks4
.d-*-inline-flex brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Flex Veibeskrivelse
Flex-rad-reverse
.Flex-rad-reverse Klasse brukes til å endre retningen på gjenstandene omvendt. Denne flexbox -klassen brukes bare med .rad klasse. Denne klassen vil også bli brukt med forskjellige breakpoints
Kode
Boks1
Box2
Boks3
Boks4
.Flex-*-rad-reverse brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Flex-kolonne
.Flex-kolonne Klasse brukes til å konvertere rader til kolonner. Denne klassen brukes også med .rad klasse.
Kode
Boks1
Box2
Boks3
Boks4
.Flex-*-kolonne brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Flex-kolonne-reverse
.Flex-kolonne-reverse klasse, konverter rader til kolonner og endrer også retningen på flex -elementene i omvendt. Denne klassen brukes også med .rad klasse.
Kode
Boks1
Box2
Boks3
Boks4
.Flex-*-kolonne-reverse brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Flex-wrap
.Flex-wrap Klasse brukes til å pakke inn varene inne i beholderen, og med denne klassen administreres overløpet av flex -varene. Som standard er elementene innpakket, men du kan fremdeles bruke denne klassen til å pakke inn varene som
Overløp flex -beholderen.
Kode
Boks1
Box2
Boks3
Boks4
.Flex-*-Pakk brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Flex-Nowrap
.Flex-Nowrap Klasse brukes der du ikke vil at flex-elementene dine skal pakkes inn, fordi flex-elementer som standard er pakket inn i flex-beholderen på grunn av dens responsive oppførsel, slik at du kan bruke Flex-Nowrap-klassen for å pakke ut varene dine.
Kode
Boks1
Box2
Boks3
Boks4
.Flex-*-Nowrap brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Flex-wrap-reverse
.Flex-wrap-reverse Klasse brukes ikke bare til å pakke flex -elementer inne i en beholder, men reverser også bestillingen.
Kode
Boks1
Box2
Boks3
Boks4
.Flex-*-Wrap-Reverse brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Flex-Fill
.Flex-Fill Klasse brukes bare med .Col -klasse uten noe bruddpunkt eller bredde. Flex-Fill-klassen tar 100% bredde på beholderen og tvinger de andre flex-elementene til å dele rommet likt. Flex-Fill-klasse kan brukes på flere flex-elementer og bare på flex-elementene.
Kode
Boks1
Box2
Boks3
Boks4
.Flex-*-Fyll brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Rettferdiggjøre innhold
Justify-Content-klasser brukes til å rettferdiggjøre flex-elementer i radretning eller med andre ord langs hovedaksen.
Justify-Content-Start
.Justify-Content-Start klasse, flytter flex -varene til venstre på beholderen. Denne klassen brukes bare med .D-FLEX-klasse.
Kode
Boks1
Box2
Boks3
Boks4
Boks5
.Justify-Content-*-Start brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Justify-Content-End
.Justify-Content-End klasse, flytter flex -varene til høyre side av beholderen. Denne klassen brukes bare med .d-flex klasse.
Kode
Boks1
Box2
Boks3
Boks4
Boks5
.Justify-Content-*-Slutt brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Justify-Content-Center
.Justify-Content-Center klasse, samle alle flex -varene i midten av beholderen. Denne klassen brukes bare med .d-flex klasse.
Kode
Boks1
Box2
Boks3
Boks4
Boks5
.Justify-Content-*-Center brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Justify-Content-mellom
.Justify-Content-mellom Klasse brukes til å plassere mellomrom mellom flex -varene. Denne klassen plasserer den første flex -varen i starten av containeren og den siste flex -varen på slutten av beholderen og deler all plassen likt mellom de gjenværende flex -varene .Denne klassen brukes bare med .d-flex klasse.
Kode
Boks1
Box2
Boks3
Boks4
Boks5
.Justify-Content-*-Mellom brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Justify-Content-Around
.Justify-Content-Around Klasse brukes til å dele plass likt mellom alle flex-elementene. Denne klassen brukes bare med .d-flex klasse.
Kode
Boks1
Box2
Boks3
Boks4
Boks5
.Justify-Content-*-Rundt brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Juster innhold
Justere innholdsklasser brukes til å justere innholdet i kolonnetningen eller bare med andre ord langs kryssaksen. For å justere flex -elementene, bruk .D-FLEX-klasse med .Flex-wrap klasse.
Align-elems-start
.Align-elems-start klasse, juster flex -elementene øverst i beholderen.
Kode
Boks1
Box2
Boks3
Boks4
Boks5
Boks6
Boks7
Boks8
Box9
Boks10
Boks11
Boks12
.Align-elementer-*-Start brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Align-elems-end
.Align-elems-end klasse, juster flex -elementene nederst i beholderen.
Kode
Boks1
Box2
Boks3
Boks4
Boks5
Boks6
Boks7
Boks8
Box9
Boks10
Boks11
Boks12
.Align-elementer-*-Slutt brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Align-elems-sentrum
.Align-elems-sentrum Klasse sentrerte vertikalt flex -varene i en beholder.
Kode
Boks1
Box2
Boks3
Boks4
Boks5
Boks6
Boks7
Boks8
Box9
Boks10
Boks11
Boks12
.Align-elementer-*-Senter brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Align-elems-baseline
.Align-elems-baseline Klasse, juster innholdet i boksene i henhold til hovedaksen på grunn av hvilke elementer i beholderen som justeres automatisk i vertikal retning.
Kode
Boks1
Box2
Boks3
Boks4
Boks5
Boks6
Boks7
Boks8
.Align-Items-*-Baseline brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Align-elems-stretch
.Align-elems-stretch Klasse, utvid flex -varene vertikalt i henhold til høyden på beholderen.
Kode
Boks1
Box2
Boks3
Boks4
.Align-elementer-*-Strekk brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør denne klassen responsiv for andre skjermer også.
Juster meg selv
.Align-Self Klassen er akkurat som .Align-elementer klasse, men forskjellen mellom begge klasser er .Align-elementer brukes på flex-beholderen, og den behandler alle flex-elementene med samme klasse som brukes av Flex-beholderen på den tiden, men .Align-Self Klassen brukes på enkelt flex -element, og det behandler et enkelt flex -element.
Følgende er .Juster-selvklasser som brukes på flex-elementer
- .Align-Self-Start
- .Align-Self-End
- .Align-Self-Center
- .Align-Self-Baseline
- .Justere-selv-stretch
.Align-Self-*-Start/End/Center/Baseline/Stretch brukes også med breakpoints, bare bytt ut (*) symbol med XXL, XL, LG, MD eller SM. Å bruke breakpoints gjør disse klassene responsive for andre skjermer også.
Konklusjon
Flexbox-klasser brukes med D-Flex-klasse i Bootstrap 5 for å rettferdiggjøre, justere og administrere innholdet enten i rader eller i kolonner. I ovennevnte artikkel Flex Containers -klasser, Flex Veibeskrivelse, innpakningsklasser, Flex rettferdiggjør klasser for å rettferdiggjøre elementene på rad, flexjustering av klasser for å justere innholdet i kolonnen og klassene for å justere elementene i seg selv diskuteres i detalj.