CSS Flexbox Layout Model | Forklart

CSS 3 tilbyr en nettoppsettmodell som heter CSS Flexbox Layout -modell eller Flexbox. Som navnet i seg selv antyder, lar Flexbox -oppsettet oss lage fleksible/responsive elementer i en beholder som kan ordnes automatisk, avhengig av skjermstørrelse. Alt i alt gjør CSS Flexbox -layoutmodellen det mulig å designe fleksible responsive oppsett.

Denne oppskrivningen vil hjelpe deg i følgende aspekter av CSS Flexbox-modellen:

• Hva er CSS Flexbox Layout -modell
• Hva er en CSS Flex -beholder
• Funksjoner i Flexbox -modellen
• Grunnleggende konsept for CSS Flexbox Layout Model
• Flexbox -egenskaper
• Eksempler

Så la oss begynne!

Hva er CSS Flexbox Layout -modell

Det er en fleksibel layoutmodul tilgjengelig i CSS3 som tilbyr en enkel og klar måte å arrangere flexelementer inne i en beholder. Det hjelper oss med å designe den responsive utformingen.

Hva er en CSS Flex -beholder

For å jobbe med Flexbox-modellen, må vi først forstå hva en flex-beholder er og for å gjøre det, la oss vurdere den undergitte figuren:

I ovennevnte utdrag representerer det grå området en flex -beholder mens punkt 1, punkt 2 osv. er varene. Så vi kan si at Flex -beholderen er en boks/beholder som kan holde flere flex -elementer.

Funksjoner i Flexbox -modellen

CSS Flexbox Layout -modellen gir mange funksjoner, noen av dem er listet opp nedenfor:

• I CSS Flexbox -layoutmodellen er det ingen flottører.
• CSS Flexbox gir en responsiv og mobilvennlig oppsett.
• Marginene for flex -beholderen kollapser ikke med innholdets marginer.
• Å plassere barneelementet er veldig enkelt i flexbox -modellen.
• Elementets ordre kan enkelt endres uten å redigere kilden HTML.

Grunnleggende konsept for CSS Flexbox Layout Model

Noen av de grunnleggende konseptene i CSS Flexbox Layout -modellen er listet opp nedenfor:

• CSS Flexbox -modellen har muligheten til å endre elementets høyde og bredde til den beste passformen innenfor beholderens tilgjengelige ledig plass.
• Flexbox er retningsagnostisk, noe som betyr at elementer i Flexbox kan ordnes horisontalt så vel som vertikalt avhengig av kravene.

Flexbox -egenskaper

For å designe et responsivt oppsett er et stort utvalg av flex-egenskaper tilgjengelig i CSS3 som beskrevet i de undergitte tabellene:

Tabell-1

Egenskaper	Beskrivelse
vise	Bestemmer typen flex -beholder, i.e., Inline, blokkerer.
Flex-regi	Angir retningen på elementer i beholderen som toppbunn, venstre-høyre osv.
Flex-wrap	Bestemmer om varene skal pakkes inn eller ikke.
Flex-flow	Gir funksjonalitetene til både flex-wrap og flex-regi.
Justify-Content	Det justerer elementene/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.

Tabell-2

Egenskaper	Beskrivelse
rekkefølge	Den kontrollerer rekkefølgen på barneelementer i flex -beholderen.
Flex-Grow	Det bestemmer vekstfaktoren for et flex -element.
Flex-shrink	Det bestemmer krympingsfaktoren for barneelementer/flex -elementer.
Flex-basis	Det bestemmer standardstørrelsen på barneelementet/flex -elementet.
Flex	Det brukes til å oppnå funksjonalitetene til tre egenskaper i.e. Flex-grow, flex-shrink og flex-basis.
Align-Self	Det gjør at standardjustering (langs tverraksen) kan overstyres for individuelt barneelement.

Egenskapene beskrevet i tabell 1 er kjent som Flex Container eller Foreldreelement egenskaper, mens de som er beskrevet i tabell 2 er kjent som Flex -elementer eller barneelement egenskaper.

Eksempler

I dette avsnittet vil vi implementere ovennevnte egenskaper ovenfor.

Flexbox -eksempel

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

I ovennevnte kodebit benyttet vi forskjellige egenskaper for flex container og flex-element som visning, flex-retning, justering av justeringer, gap og flex-voksen som vil stille flex display, rad-revers retning, strukket justering, 5px rader og 50px kolonner gap, og det tredje elementet vil vokse to ganger raskere enn andre elementer:

Utgangen verifiserer arbeidet med CSS Flexbox -egenskaper.

Konklusjon

CSS Flexbox -modellen tilbyr en enkel og ren måte å arrangere Flexbox -elementer inne i en beholder. Den gir mange funksjoner som responsiv design, enkel justering av elementer osv. Dessuten kan mange egenskaper brukes til å designe og justere gjenstandene på en bedre måte, for eksempel flex-retning, flex-wrap, Align-Items, Order, Flex-Grow, etc. Denne artikkelen diskuterte Flexbox Layout -modellen, Flex Container og deres egenskaper.