CSS Flexbox -egenskaper | Forklart

Et responsivt nettsted krever at du får elementer til å endre deres oppførsel som bredde, høyde, oppløsning, orientering osv. I henhold til typen enhet som bruker nettstedet. CSS gir visse enheter som kan hjelpe deg med å bygge et responsivt nettsted som medieforespørsler, rutenett, flexbox osv. Her i denne oppskrivningen vil fokuset vårt være på Flexbox og egenskaper knyttet til det. Emner som fremheves i dette innlegget er som følger.

1. Hva er Flexbox
2. Hva er en flex -beholder
3. Hva er et flex -element
4. Flexbox -egenskaper

Hva er Flexbox

Flexbox Layout -modellen gir et effektivt og dynamisk arrangement av elementer ved å plassere dem inne i en beholder med like distribuert plass. Denne utformingen gjør elementene responsive, noe som betyr at elementene endrer atferden i henhold til den typen enhet som viser dem.

En flexbox gjør i utgangspunktet elementer fleksible og gir dem passende posisjon og symmetri.
Den består to av to komponenter som er flexbeholder og flex -elementer. Begge disse komponentene er forklart nedenfor.

Hva er en flex -beholder

Dette er en komponent i en flexbox som definerer egenskapene til stamfarens element ved å sette skjermen til flex eller inline-flex.

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.

Nå som vi har en god forståelse av en flexbox og dens komponenter, vil vi utforske forskjellige egenskaper som er assosiert med flexbox.

Flexbox -egenskaper

Nedenfor har vi forklart i stor dybde de forskjellige egenskapene knyttet til en flexbox.

Vis eiendom

For å oppgi hvordan et element skal vises, brukes visningsegenskapen.

Syntaks

Display: Flex;

Parametere forklart

Flex: Denne verdien viser et element som en flex -beholder.

Eksempel

Anta at du vil at en div container skal vises som en flexbox. Slik gjør det.

Html

For å oppgi hvordan et element skal vises, brukes visningsegenskapen.

Her har vi generert en div container og et avsnitt har blitt nestet inni den.

CSS

.container
Display: Flex;
bakgrunnsfarge: akvamarin;

Ved å bruke klassen tildelt Div -elementet, setter vi skjermen for å flexere, og gi den en viss bakgrunnsfarge.

Produksjon

Div ble med hell vist som en flexbox.

Resten av egenskapene relatert til Flexbox er delt inn i to kategorier, som er Flex Container Properties, og Flex -elementegenskaper. Vi vil diskutere begge klassene hver for seg.

Flex Container Properties

Egenskaper som faller inn under denne kategorien er som følger.

Flex-Direction Property

Denne egenskapen brukes til å beskrive retningen på elementer som er til stede i en flexbox.

Syntaks

Flex-retning: Row | rad-reverse | kolonne | kolonne -Reverse | Opprinnelig | arve;

Parametere forklart

rad: Denne standardverdien ordner elementene horisontalt.
rad-reverse: Denne verdien plasserer elementer på rad, men med en omvendt retning.
kolonne: Det ordner varene vertikalt.
Kolonne-reverse: Den ordner elementene i en kolonne, men på en omvendt måte.

Eksempel

La oss plassere visse gjenstander i en flexbox som har retning “rad”.

Html

Punkt 1
Punkt 2
Punkt 3
Punkt 4

I koden ovenfor lager vi en større DIV -beholder og hekker fire flere divcontainere inni den.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;
Flex-regi: rad;

Her viser vi den større div som en flex -beholder og gir den litt farge, og til slutt er retningen satt til å rad.

CSS

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

Nå styler vi varene våre i containeren ved hjelp av grunnleggende CSS -egenskaper.

Produksjon

Varene er ordnet på rad.

Justify-Content-eiendom

Hvis elementene i en flexbox ikke bruker det horisontale rommet helt, samsvarer denne egenskapen dem over hovedaksen.

Syntaks

Justify-Content: Flex-Start | Flex-end | sentrum | Space-mellom | rom-rundt | Space-Evenly | Opprinnelig | arve;

Parametere forklart

Flex-start: Den plasserer elementer i starten av beholderen og er standardverdien.
Flex-end: Dette plasserer elementene på slutten av beholderen.
senter: Dette plasserer elementene i midten av beholderen.
Space-mellom: Det gir plass mellom varene.
Space-Around: Den legger til mellomrom før, mellom og etter hvert element.
Space-Evenly: Dette gir hvert element like mellomrom.

Eksempel

Anta at du vil rettferdiggjøre innholdet ditt til midten av flex -beholderen.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;
Justify-Content: Center;

Senterverdien vil plassere alle flex -elementene i midten av beholderen.

CSS

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

Ved hjelp av grunnleggende CSS styler vi elementene.

Produksjon

Varene ble plassert i sentrum.

Eiendom i justerte elementer

Hvis gjenstandene i en flexbox ikke bruker det vertikale rommet helt, samsvarer denne egenskapen dem over tverraksen.

Syntaks

_stretch _ Center _ Flex-Start _ Flex-End _ Baseline _ Initial _ Arve

Parametere forklart

tøye ut: Det er en standardverdi som strekker varene som passer 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

Her har vi vist hvordan grunnverdien til eiendommenes egenskap fungerer.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;
Høyde: 200px;
Align-elementer: baseline;

For å demonstrere denne egenskapen på riktig måte gir vi en viss høyde til Flex-beholderen og setter egenskapen til justering av justeringer til baseline.

Produksjon

Eiendommen fungerer som den skal.

Flex-wrap eiendom

Hvis det ikke er mye plass på en enkelt flex -linje, bestemmer denne egenskapen om de skal pakke inn elementer eller ikke.

Syntaks

Flex-Wrap: Nowrap | pakk | Wrap-Reverse | Opprinnelig | arve;

Parametere forklart

Nowrap: Denne standardverdien pakker ikke elementer.
pakke inn: Det pakker inn elementene om nødvendig.
Wrap-Reverse: Det pakker inn elementene om nødvendig, men på omvendt måte.

Eksempel

For å forstå denne egenskapen, konsulter eksemplet nedenfor.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;
Flex-Wrap: Wrap-Reverse;

I koden ovenfor har vi satt flex-wrap-egenskapen til innpakning av reverse, noe som betyr at om nødvendige varer i beholderen vil bli pakket inn, men på en omvendt måte.

Produksjon

Elementer ble pakket inn på en omvendt måte.

Eiendom i justering

Det endrer oppførselen til eiendommen til flex-wrap og ligner ganske mye på egenskapen til justerte elementer med den eneste forskjellen er at den justerer flexlinjene i stedet for flexelementene.

Syntaks

Align-Content: Flex-Start | Flex-end | sentrum | Space-mellom | rom-rundt | Space-Evenly | Opprinnelig | arve;

Parametere forklart

Flex-start: Den plasserer elementer i starten av beholderen og er standardverdien.
Flex-end: Dette plasserer elementene på slutten av beholderen.
senter: Dette plasserer elementene i midten av beholderen.
Space-mellom: Det gir plass mellom varene.
Space-Around: Den legger til mellomrom før, mellom og etter hvert element.
Space-Evenly: Dette gir hvert element like mellomrom.

Eksempel

Her er et eksempel på eiendommen som diskuteres.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;
Høyde: 300px;
Flex-Wrap: Wrap;
Align-Content: Space-mellom;

Her har vi økt høyden på beholderen ytterligere slik at du kan forstå denne egenskapen på en bedre måte. Videre har vi tildelt egenskapen til justering av justeringer mellom justeringer mellom elementene mellom elementer som vil gi rom mellom elementer.

Produksjon

Plass mellom varene ble lagt til vellykket.

Flex-Flow-eiendom

Den beskriver retningen på elementer mens han spesifiserer om de skal pakke inn elementer eller ikke, dessuten er det en korthåndsegenskap for etterfølgelsen.

1. strømretning
2. Flow-wrap

Syntaks

Flex-Flow: Flow-Direction Flow-Wrap | Opprinnelig | arve;

Parametere forklart

strømretning: Den definerer retningen på elementer.
Flow-wrap: Det sier om elementene skal pakkes inn eller ikke.

Eksempel

Tenk på eksemplet nedenfor for å forstå arbeidet med denne eiendommen.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;
Flex-flow: kolonne-reverse wrap;

Ved hjelp av Shorthand-egenskapen har vi satt retningen på flex-elementene som kolonne-reverse mens vi pakker dem inn ved å bruke innpakningsverdien.

Produksjon

Elementer ble pakket inn i en kolonne, men i omvendt rekkefølge.

Nå vil vi diskutere vår neste kategori.

Flex -elementegenskaper

Egenskaper assosiert med flex -elementet er som følger.

Bestill eiendom

Det definerer rekkefølgen på et flex -element i forhold til andre elementer som er til stede i en flexbox.

Syntaks

Bestilling: Num | Opprinnelig | arve;

Parametere forklart

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

Eksempel

Slik angir du rekkefølgen på varer i Flexbox.

Html

Punkt 1
Punkt 2
Punkt 3
Punkt 4

For å forstå denne egenskapen ordentlig tildeler vi hver nestet div noen ID.

CSS

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

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

Her viser vi først Div Container som en Flexbox og gir den en viss høyde for å demonstrere arbeidet med dette riktig, og til slutt styler vi flex -varene våre.

CSS

#item1
Bestilling: 4;

#item2
Bestilling: 1;

#item3
Bestilling: 2;

#item4
Bestilling: 3;

Ved å bruke disse ID -ene tildeler vi noen bestillinger til hvert element.

Produksjon

Elementer ble plassert i den tildelt bestillingen.

Align-Self-eiendom

Denne egenskapen brukes til å definere plasseringen av elementer i en flex -beholder. Denne egenskapen overstyrer egenskapen til juster og brukes på flexelementer.

Syntaks

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

Parametere forklart

Auto: 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.

CSS

#item2
Align-Self: Center;

#item3
Align-Self: Flex-Start;

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

Produksjon

Begge varene ble justert med suksess.

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

#item2
Flex-Grow: 10;

Vi setter verdien av Flex-Grow-egenskapen til 10, noe som betyr at vare 2 vil være 10 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 denne egenskapen.

Syntaks

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

Parametere forklart

Auto: 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

#item4
Flex-basis: 300px;

Vi setter flex-basis i punkt 4 til 300px, noe som betyr at den opprinnelige lengden på det fjerde 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, dessuten er det en kortfattet eiendom for

1. Flex-vekst
2. Flex-shrink
3. Flex-basis

Syntaks

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

Parametere forklart

Flex-Grow: Det 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

#item2
Flex: 0 0 250px;

Punkt 2 vil verken vokse eller krympe, men det vil ha en lengde på 250px.

Produksjon

Eiendommen fungerer som den skal.

Konklusjon

Egenskaper assosiert med Flexbox er klassifisert i to kategorier som er flexbeholderegenskaper, og Flex Box -egenskaper. Egenskaper relatert til flex -beholder er; Flex-flow, flex-retning, justering av justeringsinnhold, rettferdig innhold osv. I mellomtiden er egenskaper koblet til flex -element; ordre, flex-voksen, flex-basis, align-self osv. Alle disse egenskapene er diskutert i denne opplæringen sammen med relevante eksempler.