Forskjell mellom Justify-Content og Align-Items

Når du oppretter et nettsted, er det nødvendig å ta elementoppsettet i betraktning. “Vis flex”Eiendom i CSS gjør elementet fleksibelt, og innholdet er rettferdiggjort og justert enkelt hvis innholdet ikke bruker alt tilgjengelig plass. “Justify-Content”Eiendom spesifiserer elementene på x-aksen, mens“Align-elementer”Eiendom justerer elementer til y-aksen.

Denne håndboken vil demonstrere forskjellen mellom “Justify-Content”Og“Align-elementer”Av den fleksible beholderen.

Forskjell mellom “Justify-Content” og “Align-Item” i CSS

CSS “Justify-Content”Eiendom spesifiserer hvordan nettleseren tildeler rom mellom og rundt innholdselementer langs en flex -beholderens hovedakse og en rutenettbeholderens inline -akse. Imidlertid "Align-elementer”Eiendom setter varene på Y-aksen i Flexbox. I rutenettoppsett setter den innretting av innholdet på blokkeringsaksen.

Verdier for "Justify-Content" -egenskap

“Justify-Content”Eiendom kan ha verdier som er listet opp nedenfor:

• senter
• plass mellom
• Space-Evenly
• rom-rundt
• Flex-start
• Flex-end
• første
• Arve

Verdier for egenskapen til "Align-Items"

“Align-elementer”Eiendom kan ha verdier som er listet opp nedenfor:

• senter
• tøye ut
• grunnlinje
• Flex-start
• Flex-end
• første
• Arve

Hvordan rettferdiggjøre innholdet med CSS?

For å rettferdiggjøre innholdet i HTML ved å bruke CSS, “Justify-Content”Og“Align-elementer”Egenskaper brukes. For demonstrasjonen har vi gitt eksemplet der hoved "div”Brukes med eiendommen”vise”Verdi som“Flex”. Denne eiendommen vil gjøre “div”Fleksibel for varene sine. Den andre boksen inne i hoveddiv”Boks vil være berettiget og justert i henhold til verdiene.

Følg opp de uttalte trinnene for bedre forståelse.

Trinn 1: Opprett HTML -side

Først må du lage en HTML -side og legge til følgende elementer:

• Legg til en "”Element med klassenavnet”eske”.
• Inne i dette “”Container, legg til en annen“ ”og tilordne den en klasse“Boks-1”:

Trinn 2: Style First “Div” Element

For styling av den første “div”Element, få tilgang til det i CSS ved hjelp av tildelt klasse”.eske”. Bruk deretter de underkodede egenskapene:

.Boks
Grense: 2px fast Blueviolet;
Bredde: 500px;
Høyde: 250px;
Margin: 40px auto;
Display: Flex;

Her er utdypingen av ovennevnte kodeutdrag:

• “grense”Eiendom brukes til å justere grensen rundt div.
• “bredde”Eiendom med en verdi av“500px”Angir bredden på boksen Div.
• “høyde”Eiendom setter høyden på“ div ”til”250px”.
• “margin”Angir et rom for“40px”Øverst og bunn.
• “vise”Eiendom setter oppførselen til displayet. Verdien "Flex”Gjør dette divet fleksibelt for varene sine.

Trinn 3: Style Second “Div” Element

Få tilgang til et sekund “div”Gjennom den tildelte klassen”.Boks-1”Og bruk følgende CSS på det:

.Boks-1
Bredde: 100px;
Høyde: 100px;
bakgrunnsfarge: sjokolade;

“bredde”Og“høyde”Egenskaper brukes. Og så "bakgrunnsfarge”Eiendom gjelder for å stille inn fargen på elementets bakgrunn:

Trinn 4: Bruk eiendom "Justify-Content"

For å rettferdiggjøre innholdet har vi brukt "Justify-Content”Eiendom som“senter”På hoved-div”. Denne egenskapen justerer innholdet i henhold til verdien som er gitt til den:

.Boks
Grense: 2px fast Blueviolet;
Bredde: 500px;
Høyde: 250px;
Margin: 40px auto;
Display: Flex;
Justify-Content: Center;

Fra bildet nedenfor kan det observere at hoved "div”Justerer innholdet”Boks-1”Div in the Center on X-Axis:

Trinn 5: Bruk eiendom "Align-Items"

“Align-elementer”Eiendom setter varene på Y-aksen i Flexbox. I CSS har vi lagt til egenskapen "Align-Items" som "senter”For å justere innholdet i sentrum langs y-aksen:

.Boks
Grense: 2px fast Blueviolet;
Bredde: 500px;
Høyde: 250px;
Margin: 40px auto;
Display: Flex;
Justify-Content: Center;
Align-elementer: sentrum;

Du kan se det, vi har rettferdiggjort innholdet med CSS:

Vi har vist forskjellen mellom rettferdig innhold og justering og hvordan du bruker dem for å rettferdiggjøre innholdet.

Konklusjon

Egenskapene "Justify-Content”Og“Align-elementer”Brukes til å spesifisere hvordan nettleseren viser innholdet. Egenskapen Justify-Content legger til marginene rundt og mellom elementene langs flex-beholderens x-aksen og nettbeholderens inline-aks. Imidlertid "Align-elementer”Eiendom setter varene på Y-aksen i Flexbox. Dette innlegget har utdypet forskjellen mellom rettferdig-innhold og justering og hvordan du bruker dem for å rettferdiggjøre innholdet.