Hvordan bruke CSS Flex-Grow-eiendom?

CSS Flex-Grow-eiendommen er en del av “Flex" oppsett. Hovedformålet er å gi ekstra plass for elementet i Flexbox. Det gjøres ved å tilordne tall som en verdi til “Flex-Grow”Eiendom. Et stort antall nettlesere støtter denne egenskapen som gjør designet uendret mens du åpner i flere nettlesere. Det brukes stort sett mens du designer deler av nettsiden for å forbedre det generelle utseendet på nettstedet.

Denne artikkelen demonstrerer trinn-for-trinn-prosedyren for å bruke “Flex-Grow”Eiendom.

Hvordan bruke CSS “Flex-Grow” -egenskaper?

CSS Flex-Grow-egenskapen brukes til å spesifisere hvor mye et element skal vokse med søsknene sine i en flex-beholder. Følg de under-nevnte trinnene for å bruke CSS Flex-Grow-eiendommen:

Trinn 1: Opprett en flexbox
I HTML -filen, først, oppretter du en overordnede div og legger til flere "”Tagelementer i det. Etter det, tilordne forskjellige klasser til hver “”Tag som brukes til stylingformål:

S.Nei
Ansatt ID
ansattes navn
Lønn
Merknader

Nå, i CSS -filen, legg til følgende CSS -egenskaper:

.struct
Display: Flex;
Justify-Content: Space-Around;
Flex-Flow: Row Wrap;
Align-elementer: Strekk;
polstring: 20px;
Farge: Whitesmoke;
Bakgrunnsfarge: Midnightblue;

Forklaringen av ovenfor brukte CSS -egenskaper er skrevet nedenfor:

Først "Flex”Og“rom-rundt”Verdiene er satt for“vise”Og“Justify-Content" egenskaper. Det oppretter en overordnet div som flex og tildeler en lik partisjon for hvert flex -element.
Sett etter det “radinnpakning”Og“tøye ut”Som en verdi for“Flex-flow”Og“Align-elementer" egenskaper. Det setter retningen til flex -elementet mot “rad”Og lager gjenstander dekket i det tilgjengelige rommet.
Til slutt, "polstring”,“bakgrunnsfarge”Og“farge”Egenskaper brukes til bedre visualiseringsformål.

Etter å ha utført koden ovenfor, ser websiden slik ut:

Utgangen viser at flex er opprettet og “Flex-elementer”Er på linje i radretningen.

Trinn 2: Bruk av "Flex-Grow" -egenskaper
Velg nå forskjellige klasser som ble tildelt hvert barn Div i trinnene ovenfor. Og tilordne følgende CSS -egenskaper:

.Grow1
Flex-Grow: 1;
Bakgrunnsfarge: Orangered;
polstring: 5px;

.Grow2
Flex-Grow: 2;
bakgrunnsfarge: blå;
polstring: 5px;

.Grow3
Flex-Grow: 2;
Bakgrunnsfarge: Springgreen;
polstring: 5px;

.original
Bakgrunnsfarge: RoyalBlue;
polstring: 5px;

Forklaringen på ovennevnte kode er beskrevet nedenfor:

Velg først klassen som heter “Grow1”Og sett verdien på 1 til“Flex-Grow”Eiendom. Etter det gis "orangered" og "5px" -verdiene til "bakgrunnsfarge”Og“polstringHenholdsvis egenskaper.
På samme måte er bakgrunnsfargen og polstringsegenskapene satt til andre DIV -klasser. Disse egenskapene brukes til "Grow2”Og“Grow3”Klasser og tilordne Flex-Grow-egenskapen med forskjellige verdier.
“Flex-Grow“Eiendom utvider den div til en viss verdi inne i flexbox. Jo større verdi, jo større er størrelsen på den div i flexbox.

Etter utførelsen av koden ovenfor ser websiden slik ut:

Utgangen viser at “Flex-Glow”Eiendom utvider DIV basert på visse verdier i flexbox.

Konklusjon

CSS “Flex-Grow”Eiendom brukes til å tilordne ekstra mellomrom til elementene i Flexbox. Utvikleren velger DIV fra Flexbox og bruker deretter “Flex-Grow”Eiendom og tildeler den spesifikke verdien. Jo større verdi, jo større er plassen som er tildelt det divelementet inne i flexbox. Denne artikkelen har vellykket demonstrert hvordan du bruker CSS Flex-Grow-eiendommen.