CSS - bedre måte å sette avstand mellom Flexbox -elementer

Det er to mest brukte metoder for å sette avstanden mellom flexbox -elementer, i.e., Bruken av CSS-egenskapen til rettferdig innhold med plassen med romområdet og med plassen mellom eiendommen. Når “Justify-Content”CSS -eiendom er satt til“rom-rundt”, Det gir plass rundt hvert flexbox -element i HTML -elementet. Imidlertid når verdien er satt som "plass mellom”, Det gir plass mellom gjenstandene i HTML -elementet.

Denne artikkelen vil demonstrere bruken av både "rom-rundt" og "rom-mellom" -verdiene for "rettferdiggjøring" med det formål å legge til mellomrom mellom Flexbox-elementene.

Hvordan sette avstand mellom Flexbox -elementer?

Syntaksen for å definere “Justify-Content”Å sette plass rundt og mellom Flexbox -varene er som følger:

Justify-Content: Space-Around; Justify-Content: Space-mellom;

Forutsetning: Opprette Flexbox -elementer

For å sette avstanden mellom Flexbox -elementer, kreves det først å opprette en Flexbox med Flexbox -elementene og deretter bruke CSS -egenskapene på den.

Eksempel

La oss legge til et div containerelement for å lage hoveddiven og deretter noen DIV -elementer inni det for å lage Flexbox -elementene:

EN
B
C
D

I kodebiten lagt til ovenfor:

• En "div”Containerelement er lagt til med klassen erklært som“Flex”.
• Inne i dette blir fire flere div containerelementer lagt til hver med klassenavnet erklært som "punkt”.
• Div -elementene har teksten “EN”,“B”,“C”Og“D”Skrevet på dem.

CSS -stilelementet vil inneholde noen egenskaper for å gjøre en bedre visning av Flexbox -elementene:

.Flex

Display: Flex;
Høyde: 50VH;
Align-elementer: sentrum;

.punkt

Bredde: 40px;
Høyde: 40px;
Bakgrunnsfarge: PowderBlue;
tekst-align: sentrum;
polstring: 25px;

I ovennevnte kodebit er følgende CSS -egenskaper lagt til:

• “vise”Eiendom er blitt definert som“Flex”For å justere teksten riktig inne i Div -beholderen.
• “høyde”Eiendom er satt til“50VH”For å stille den vertikale lengden på DIV -containerelementet.
• “Align-elementer”Eiendom er definert som sentrert for å samkjøre divelementet til sentrum.
• Etter ".Flex”Klassevelger,“.punkt”Klasselektor er lagt til som har CSS -egenskapene for elementene i Main Div Container.
• “bredde”Eiendom er definert som“40px”For å stille inn den horisontale lengden på hver av Flexbox -elementene.
• “høyde”Av Flexbox -elementene er satt til“40px”.
• “bakgrunnsfarge”Av Flexbox -elementene er definert som“pulver blå”.
• “Tekstalign”Center er blitt definert som“senter”For å justere de skriftlige alfabetene i Flexbox -elementene til sentrum.
• “polstring”Eiendom er blitt definert som“25px”For å definere avstanden mellom innholdet og grensen.

Ovennevnte kodebit genererer følgende utdata:

Nå er det pålagt å sette avstanden mellom de opprettede flexbox -elementene.

Metode 1: Definer “Justify Content” -egenskaper som “Space-Around”

En av metodene er å legge til “Justify-eiendom”Og definere det som“rom-rundt”For å legge til mellomrommene eller avstanden rundt hver Flexbox -vare:

.Flex

Justify-Content: Space-Around;
..

.punkt

..

Ovennevnte kodeeksempel indikerer at det er tillegg av "Justify-Content”Eiendom som er definert som“rom-rundt”. Prikkene indikerer at alle egenskapene forblir de samme her som lagt til ovenfor i den forutsetningen i dette innlegget.

Som et resultat vil det definerte rommet bli lagt rundt Flexbox -elementene:

Metode 2: Definer egenskapen "Justify-Content" som "rom mellom"

Den andre metoden er å legge til “Justify-eiendom”Og definere det som“plass mellom”For å legge til mellomrommene eller avstanden mellom hver Flexbox -element:

.Flex

Justify-Content: Space-mellom;
..

.punkt

..

Eksemplet ovenfor indikerer at det er tillegg av "Justify-Content: plass mellom”Og alle CSS -egenskapene forblir de samme også her.

Eksemplet ovenfor vil legge til avstand mellom hvert flexbox -element. Imidlertid vil det ikke være noen avstand mellom venstre og det høyre varen og DIV -beholderen fordi den bare legger avstand mellom Flexbox -elementene i motsetning til "rom-rundt”:

Dette oppsummerer de to forskjellige metodene for å sette avstanden mellom Flexbox -elementene.

Konklusjon

For å stille inn avstanden mellom Flexbox -elementene, legg til ID- eller klassevelgeren i CSS -stilelementet som refererer til overordnet element der alle Flexbox -elementene er opprettet, og deretter definere "Justify-Content: plass mellom”Eiendom som enten“rom-rundt”Eller“plass mellom”. Denne bloggguiden om metodene for å sette avstanden mellom Flexbox -elementer.