Flex -elementer i CSS | Forklart

Flexbox er en layoutmodell som justerer elementer i en beholder dynamisk ved å tilordne dem like distribuert plass. Denne utformingen viser seg å. Denne modellen består av to komponenter som er, flex container og flex -elementer. Imidlertid vil vårt fokus i denne oppskrivningen være på flex-containere. Emner omtalt i denne skrivingen er som følger.

1. Hva er et flex -element
2. Flex -elementegenskaper

Hva er et flex -element

Et flex -element beskriver egenskapene til etterfølgerelementene, dessuten kan det være mange flex -elementer i en flex -beholder.

Disse elementene gjengir noen egenskaper som er forklart i detalj nedenfor.

Flex -elementegenskaper

Følgende egenskaper er tilknyttet et flex -element.

Bestill eiendom

For å definere rekkefølgen på et flexelement i forhold til andre elementer som er til stede i en Flexbox, brukes ordreegenskapen.

Syntaks

Bestilling: Num | Opprinnelig | arve;

Parametere forklart
Num: Denne verdien definerer rekkefølgen på et flex -element. Som standard er verdien 0.

Eksempel
Her er et eksempel på ordreegenskapen.

Html

Punkt 1
Punkt 2
Punkt 3
Punkt 4

I koden ovenfor ble det opprettet en DIV -container og fire divene ble nestet inni den. Hver av den nestede div har blitt tildelt noen ID.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;

Her har den større div blitt vist som en flex -beholder og har fått noen bakgrunnsfarge.

CSS

.elementer div
Bakgrunnsfarge: Lightgrey;
Margin: 15px;
polstring: 20px;
Font-størrelse: 35px;

Vi styler nå varene våre til stede i Flex -beholderen med noen grunnleggende CSS -egenskaper.

CSS

#item1
Bestilling: 4;

#item2
Bestilling: 1;

#item3
Bestilling: 2;

#item4
Bestilling: 3;

I koden ovenfor bruker vi IDen til hvert element for å gi den noen bestilling.

Produksjon

Hver vare er lagt inn i henhold til bestillingen.

Flex-Grow-eiendom

Denne egenskapen beskriver i hvilken grad et element vil vokse i forhold til de andre elementene som er til stede inne i beholderen.

Syntaks

Flex-Grow: Number | Opprinnelig | arve;

Parametere forklart
Antall: Denne verdien sier omfanget av vekst av et element. Som standard er verdien 0.

Eksempel
Anta at vi bare vil dyrke ett element med hensyn til andre. Slik gjør du det.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;

.elementer div
Bakgrunnsfarge: Lightgrey;
Margin: 15px;
polstring: 20px;
Font-størrelse: 35px;

#item1
Flex-Grow: 15;

Vi setter verdien av Flex-Grow-egenskapen til 15. Punkt 1 vil være 15 ganger større sammenlignet med andre elementer.

Produksjon

Eiendommen fungerer som den skal.

Flex-shrink-eiendom

Denne egenskapen definerer i hvilken grad et element vil krympe i forhold til de andre elementene som er til stede inne i beholderen.

Syntaks

Flex-Shrink: Nummer | Opprinnelig | arve;

Parametere forklart
Antall: Det sier i hvilken grad et element vil krympe. Som standard er verdien 0.

Eksempel
Her er et eksempel på denne eiendommen.

Html

1
2
3
4
5

For å forstå arbeidet med denne eiendommen, har vi opprettet en større div container og nestet fem flere divcontainere inne i den større. Dessuten har hver div blitt tildelt en annen bakgrunnsfarge slik at konseptet med denne egenskapen kan demonstreres riktig.

CSS

.container
Display: Flex;
Bredde: 400px;
Høyde: 200px;

.Container Div
Flex-BASIS: 100px;

Her viser vi den større div som en flexbox, dessuten gir vi den også litt bredde og høyde. Til slutt setter vi flex-basis til 100px som definerer startlengden til et flex-element.

CSS

.element
Flex-Shrink: 4;

Ved å bruke klassen som er tildelt de to siste DIV-containerne, setter vi flex-shrink til 4, noe som betyr at disse varene vil være 4 ganger mindre enn andre elementer i nettet.

Produksjon

Elementene 4 og 5 er mindre enn resten av varene.

Flex-Basis-eiendom

For å sette startlengden til en flex-vare, brukes flex-basis-egenskapen.

Syntaks

Flex-Basis: Auto | num | Opprinnelig | arve;

Parametere forklart
bil: Det er en standardverdi som gir et element med lengden lik den for flex -elementet.

Num: Det sier den opprinnelige lengden på et element.

Eksempel
Anta at du vil gi en flex -element en startlengde. Vi har vist hvordan det gjøres.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;

.elementer div
Bakgrunnsfarge: Lightgrey;
Margin: 15px;
polstring: 20px;
Font-størrelse: 35px;

#item3
Flex-basis: 300px;

Vi setter flex-basis i punkt 3 til 300px, noe som betyr at den opprinnelige lengden på det tredje elementet vil være 300px.

Produksjon

Den første lengden på det tredje elementet ble satt vellykket.

Flex -eiendom

Denne egenskapen setter vekst, krymping og lengde på en gjenstand på en gang. Det er en shorthand-eiendom for flex-vekst, flex-shrink og flex-basis.

Syntaks

Flex-Property: Flex-Grow Flex-Shrink Flex-Basis | Opprinnelig | arve;

Parametere forklart
Flex-Grow: Den spesifiserer veksten av flex -elementet med hensyn til andre elementer i beholderen.

Flex-shrink: Det sier krymping av en gjenstand i forhold til andre gjenstander

Flex-basis: Det gir startlengden på et element.

Eksempel
Kontakt eksemplet nedenfor for å forstå Flex -egenskapen.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;

.elementer div
Bakgrunnsfarge: Lightgrey;
Margin: 15px;
polstring: 20px;
Font-størrelse: 35px;

#item2
Flex: 0 0 300px;

Ved hjelp av Shorthand -egenskapen er veksten og krympingen av den andre varen satt til 0, noe som betyr at denne varen verken vil vokse eller krympe, men den vil ha en lengde på 300px.

Produksjon

Eiendommen fungerer som den skal.

Align-Self-eiendom

For å beskrive arrangementet av elementer i en flex-beholder, brukes Align-Self-egenskapen.

Syntaks

Align-Self: Auto | strekk | sentrum | Flex-start | Flex-end | Baseline | Opprinnelig | arve;

Parametere forklart
bil: Dette er en standardverdi som enten arver kjennetegn fra Ancestor Container, eller hvis det ikke er noen stamfarbeholder, så strekker den varen.

tøye ut: Det strekker gjenstandene for å passe inn i beholderen.

senter: Dette plasserer elementene i midten av beholderen.

Flex-start: Den plasserer elementer i starten av beholderen og er standardverdien.

Flex-end: Dette plasserer elementene på slutten av beholderen.

grunnlinje: Dette plasserer elementene ved beholderens grunnlinje.

Eksempel
Tenk på eksemplet nedenfor for å forstå egenskapen Align-Self.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;
Høyde: 250px;

.elementer div
Bakgrunnsfarge: Lightgrey;
Bredde: 150px;
Margin: 15px;
polstring: 20px;
Font-størrelse: 35px;

Her har vi gitt en viss høyde til flex -beholderen for å vise konseptet med denne egenskapen på en klar måte, i mellomtiden er resten av koden den samme som ovenfor.

CSS

#item2
Align-Self: Flex-end;

#item3
Align-Self: Flex-Start;

Ved å bruke de tilordnede ID -ene, har punkt 2 blitt plassert på slutten av beholderen, men elementet 3 har blitt plassert i starten av beholderen.

Produksjon

Begge varene ble plassert annerledes ved å bruke egenskapen Align-Self.

Konklusjon

Et flex -element er en komponent i en flexbox som definerer egenskapene til etterfølgerelementene. Du kan plassere mange flex -elementer i en flex -beholder. Det er noen CSS-egenskaper tilknyttet disse elementene som orden, Align-Self, Flex-Growth, Flex, etc. Hver av disse gjengir flere verdier og tjener et annet formål som vi har demonstrert ved hjelp av relevante eksempler.