Flex Container i CSS | Forklart

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. Den består av to komponenter som er, flex container og flex -elementer. Imidlertid vil vi bare legge vekt på flexbeholdere. Emner diskutert er.

1. Hva er en flex -beholder
2. Flex Container Properties

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.

Egenskaper tilknyttet flex -beholderen er forklart her.

Flex Container Properties

Egenskaper relatert til en flex -beholder.

1. Flex-Direction Property
2. Flex-wrap eiendom
3. Flex-Flow-eiendom
4. Justify-Content-eiendom
5. Eiendom i justerte elementer
6. Eiendom i justering

Disse egenskapene blir forklart i detalj nedenfor.

Flex-Direction Property

For å sette retningen på elementer som er til stede i en flexbox, brukes flex-Direction-egenskapen.

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

Eksemplet nedenfor viser arbeidet med flex-Direction-egenskapen.

Html

Punkt 1
Punkt 2
Punkt 3
Punkt 4

Her har vi nestet fire DIV -containere inne i en større DIV -beholder og tildelt den en klasse “Flexbox”.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;
Flex-retning: rad-reverse;

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

CSS

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

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

Produksjon

Flex-elementene er plassert i samme rad, men i omvendt rekkefølge.

Flex-wrap eiendom

Denne egenskapen sier om elementene skal pakkes rundt flex -linjen 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.

innpakning: Det pakker inn elementene om nødvendig, men på omvendt måte.

Eksempel

Slik pakker denne egenskapen inn elementer i Flexbox. For å se effekten av denne egenskapen, må du endre størrelse på nettleservinduet.

CSS

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

I koden ovenfor har vi satt flex-wrap-egenskapen til å pakke inn. Denne verdien pakker inn varene i en beholder.

CSS

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

Ved hjelp av noen grunnleggende CSS har vi stylet flex -varene våre.

Produksjon

Flex -varene er pakket inn.

Flex-Flow-eiendom

Den sier retningen på elementer mens du spesifiserer om de skal pakke inn elementer eller ikke. Dette er en shorthand-eiendom for strømningsretning og flytpakning.

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: Row-Reverse Wrap;

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

Produksjon

Elementene har blitt pakket inn i rader på en omvendt måte.

Justify-Content-eiendom

Hvis elementene i en flexbox ikke bruker det horisontale rommet helt, justerer den rettferdige-innholdsegenskapen 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.

plass mellom: Det gir plass mellom varene.

rom-rundt: Det 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 slutten av flex -beholderen.

CSS

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

Flex-end-verdien vil plassere alle flex-elementene i slutten av beholderen.

Produksjon

Eiendommen fungerer som den skal.

Eiendom i justerte elementer

Denne egenskapen setter arrangementet av elementer i en beholder vertikalt.

Syntaks

Align-Items: Strekk | sentrum | Flex-start | Flex-end | Baseline | Opprinnelig | 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 demonstrerer vi sentrumsverdien til eiendommenes egenskap.

CSS

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

For å demonstrere denne egenskapen ordentlig gir vi en vis.

Produksjon

Elementene er justert vertikalt i midten av beholderen.

Eiendom i justering

Det endrer oppførselen til Flex-Wrap-egenskapen og ligner ganske mye på Justify Content-egenskapen med den eneste forskjellen er at den justerer flexelementene veritcally.

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.

plass mellom: Det gir plass mellom varene.

rom-rundt: Det legger til mellomrom før, mellom og etter hvert element.

Space-Evenly: Dette gir hvert element like mellomrom.

Eksempel

For å forstå hvordan egenskapen til justering av justering av justering av justeringer nedenfor nedenfor.

CSS

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

Her har vi økt høyden på beholderen ytterligere slik at du kan forstå denne egenskapen på en bedre måte. Til slutt har vi tildelt egenskapen til justeringsinnholdet plassen rundt verdien.

Produksjon

Plass rundt hvert element vertikalt ble lagt til vellykket.

Konklusjon

Flex-beholder som er en komponent i en flexbox definerer egenskapene til stamfarens element ved å stille skjermen til flex eller inline-flex. CSS gir mange egenskaper som er koblet til flex -beholderen og kan brukes til å definere egenskapene til flex -beholderen. Få av egenskapene knyttet til flex -beholderen er; Fleksinform. Hver av disse egenskapene blir forklart i detalj sammen med relevante eksempler.