Flexbox Container Properties in CSS | Forklart

Flexbox Layout -modellen presenterer en måte å designe responsive nettsteder på, og for å gjøre det, gir den mange Flex -beholder- og Flexbox -elementer egenskaper. For å jobbe med CSS Flexbox, trenger vi en beholder der vi plasserer Flexbox -elementene, og for å lage en flexbox -beholder, må vi bruke visningsegenskapen og angi verdien som inline flex eller flex. Dessuten gir CSS et bredt spekter av flexbox containeregenskaper for å endre oppførselen til en flexbox -beholder.

Denne oppskrivningen vil dekke de nedenfor-listede aspektene ved en CSS Flexbox-beholder:

• Hva er en flexbox -beholder?
• Flexbox Container Properties in CSS
• Hvordan implementere Flexbox Container Properties i CSS?

Så la oss starte!

Hva er en flexbox -beholder

Flex -beholderen er en boks/beholder som kan inneholde mange flex -elementer som vist i figuren nedenfor:

Det mørkeblå området representerer en flex -beholder i ovennevnte utdrag, mens det lyseblå området representerer flex -elementer.

Flexbox Container Properties in CSS

CSS gir mange Flexbox-beholderegenskaper som kan brukes til forskjellige formål som beskrevet i de undergitte tabellene:

Egenskaper	Beskrivelse
vise	Bestemmer typen flex -beholder i.e. Inline, blokkerer.
Flex-regi	Angir retningen på elementer i beholderen som rad, rad-reverse osv.
Flex-wrap	Bestemmer innpakningsatferden til flexbox -elementer i.e. Pakk eller ikke.
Flex-flow	Gir funksjonalitetene til både flex-wrap og flex-regi.
Flex-flow	Gir funksjonalitetene til både flex-wrap og flex-regi.
Justify-Content	Det justerer flexbox -elementene langs hovedaksen.
Align-elementer	Det justerer elementene langs kryssaksen.
Align-innhold	Det justerer linjene i flex -beholderen.
mellomrom	Kontrollerer eksplisitt mellomrommene mellom flex -elementene.

Flex-Direction Property in CSS

CSS 3 gir en Flex-regi Eiendom som kan brukes til å spesifisere retningen på elementer i Flexbox -beholderen. Bruker Flex-regi Eiendom, vi kan spesifisere elementets retning fra toppbunn, bunn, venstre høyre og høyre-venstre.

Syntaks

Utdraget nedenfor vil gi den grunnleggende syntaks for CSS Flex-Direction-egenskap:

Flex-retning: Row | kolonne | rad-reverse | kolonne-reverse;

Verdiene beskrevet i ovennevnte utdrag kan brukes til å spesifisere flexelementene horisontalt, vertikalt, horisontalt, men i omvendt rekkefølge, vertikalt, men i omvendt rekkefølge.

Flex-Wrap-eiendom i CSS

Å pakke elementene i flexbox -beholderen Flex-wrap Eiendom kan brukes. Det kan ta en av to verdier i.e. pakke inn eller Nowrap. Spesifisere "pakke inn" Verdien vil pakke elementene i flexbox -beholderen. Imidlertid “Nowrap” Verdien vil bli brukt hvis du ikke vil pakke inn elementene i Flexbox -beholderen.

Syntaks

Utdraget nedenfor vil gi den grunnleggende syntaks for CSS Flex-Wrap-egenskap:

Flex-Wrap: Wrap | Nowrap | Wrap-Reverse;

Verdiene beskrevet i ovennevnte utdrag spesifiser om flex-elementene vil pakke, ikke innpeke eller pakk i omvendt rekkefølge.

Flex-flow-eiendom i CSS

De Flex-flow Eiendom kan brukes til å benytte funksjonalitetene til begge deler Flex-regi og Flex-wrap egenskaper.

Syntaks

Utdraget nedenfor vil gi den grunnleggende syntaks for CSS Flex-Flow-egenskap:

Flex-Flow: Flex-Direction Flex-Wrap;

Justify-Content-eiendom i CSS

Det brukes til å justere beholderens elementer i forskjellige retninger som start, ende, midt, etc.

Syntaks

Utdraget nedenfor vil gi den grunnleggende syntaks for CSS Justice-Content-egenskap:

Justify-Content: Center | Flex-start | Flex-end | Space-mellom | Space-Evenly | rom-rundt;

Senter-, flex-start- og flex-end-verdiene brukes til å plassere flex-elementene i sentrum, start og slutten av beholderen henholdsvis. Space-Mween-verdien vil spesifisere mellomrommet mellom flex-elementene, plassen-til og med vil spesifisere det like store rommet rundt flex-elementene, mens plassen vil spesifisere plass før, mellom og etter flex-elementene.

Eiendom med justering av Ailight-elementer i CSS

Standardverdien for denne egenskapen er strekk som strekker flex -elementene for å passe til beholderen.

Syntaks

Eiendommen nedenfor viser hvilke verdier egenskapen til justeringen av justerte elementer kan ta:

Align-Items: Strekk | Flex-start | sentrum | Flex-end | grunnlinje;

Flex-start-, senter- og flex-end verdiene brukes til å plassere elementene i starten, sentrum, og på slutten av beholderen, mens baseline-verdien plasserer flex-elementene ved baseline på beholderen.

Eiendom med justering i CSS

Den brukes til å justere flexlinjene og standardverdien er strekk.

Syntaks

Utdraget nedenfor vil vise den grunnleggende syntaksen til egenskapen til justering av justeringer:

Align-Content: Strekk | Flex-start | sentrum | Flex-end | rom-rundt | rom mellom;

Gap -eiendom i CSS

Kontrollerer eksplisitt mellomrommene mellom flex -elementene. Den spesifiserer gapets størrelse mellom kolonner og rader.

Syntaks

Utdraget nedenfor vil vise den grunnleggende syntaksen til egenskapen til justeringsinnhold:

GAP: ROW-GAP COLONN-GAP;

De ovennevnte verdiene setter størrelsen på gapet mellom henholdsvis rader og kolonner.

Hvordan implementere Flexbox Container Properties i CSS

I dette avsnittet vil vi implementere de ovennevnte teoretiske begrepene praktisk talt.

Eksempel

I dette eksemplet vil vi implementere display-, justering av justeringer, flex-retning og gapegenskaper:

Flexbox Container

Første vare
Andre vare
Tredje vare
Fjerde vare
Femte vare

Følgende utdrag vil vise den respektive utgangen for ovennevnte kodebit:

Den ovennevnte utgangen autentiserer arbeidet med Flexbox Container Properties.

Konklusjon

Flex -beholderen er en boks/beholder som kan inneholde mange flex -varer. CSS gir mange flexbox containeregenskaper som kan brukes til forskjellige formål. For eksempel bestemmer visningsegenskapen hvilken type flex -beholder; Egenskapen for flex-retning spesifiserer retningen på elementer i beholderen, for eksempel en rad, rad-reverse osv. Denne oppskrivningen presenterer en komplett guide for Flexbox Container-egenskaper, syntaks og hvordan du bruker dem i CSS.