Hva er Flexbox i CSS?

Når du designer et responsivt nettsted, vil du at elementene dine skal endre deres oppførsel som bredde, høyde, oppløsning, orientering osv. I henhold til typen enhet som bruker nettstedet. Dette innlegget diskuterer hvordan du kan gjøre elementene dine responsive ved hjelp av Flexbox -oppsettet. Emner som diskuteres er som følger.

1. Hva er Flexbox
2. Bakgrunn
3. Flexbox -komponenter
4. Flexbox Axis
5. Flexbox -egenskaper

Hva er Flexbox

CSS Flexbox er en layoutmodell som tillater et effektivt og dynamisk arrangement av elementer. Denne utformingen er endimensjonal og tillater plassering av elementer 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. Det gjør elementene fleksible og gir dem passende posisjon og symmetri.

Flexbox ble introdusert i CSS versjon 3 for å ordne elementer i en beholder mer effektivt og dynamisk. Før Flexbox var det opprinnelig fire layoutmetoder som vi har listet opp nedenfor.

1. Blokkere
   For å lage seksjoner på en webside, brukes blokkoppsettet.
2. På linje
   Det er en layoutmetode som brukes til tekst.
3. Bord
   Dette brukes til en tabell med todimensjonale data.
4. Posisjonert
   Dette brukes til en bestemt posisjon av et element.

Nå vil vi diskutere forskjellige komponenter i en flexbox.

Flexbox -komponenter

En flexbox består av to komponenter som vi har forklart nedenfor.

1. Flex-Container
   Denne komponenten i en flexbox definerer egenskapene til stamfarens element ved å stille skjermen til flex, eller inline-flex.
2. Flex-elementer
   Den beskriver egenskapene til etterfølgerelementene, dessuten kan det være mange elementer til stede i en flex-container.

Her er en visuell fremstilling av en flexbox.

Flexbox Axis

Når du arbeider med Flexbox -oppsettet, er det to akser som bør tas vare på. Disse aksene er listet opp nedenfor.

1. Hovedaksen
2. Kryssakse

Begge aksene er forklart i detalj nedenfor.

Hovedaksen

Hovedaksen (fra venstre mot høyre) er satt av Flex-regi eiendom. Denne aksen kan gjengi fire verdier som er; rad, rad-reverse, kolonne og kolonne-reverse.

I tilfelle av de to første verdiene som er rad, og rad-reverse, Flexboxen viser en inline retning, som betyr at flex -beholderen og gjenstandene vil bli justert horisontalt. Mens for kolonne, og Kolonne-reverse Verdier retningen på flexboxen vil være blokkert, eller med enklere ord vil beholderen og gjenstandene bli ordnet vertikalt.

Kryssakse

Retningen til denne aksen er vinkelrett på hovedaksen. Hvis retningen til hovedaksen blir justert til rad eller rad-reverse Da vil kryssaksen bevege seg langs kolonnene nedover, mens i tilfelle av kolonnen, og kolonne-reverse, vil aksen bevege seg langs radene.

Begge aksene har en start, et sluttpunkt og en viss lengde mellom disse punktene.

Flexbox -egenskaper

Egenskapene til en flexbox er gitt nedenfor.

1. vise
Det viser et element som en flexbox.

2. Flex-regi
Denne egenskapen definerer retningen på varene i en flex -beholder.

3. Justify-Content
Hvis gjenstandene i en flexbox ikke bruker det horisontale rommet helt, samsvarer denne egenskapen dem over hovedaksen.

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

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

6. Align-innhold
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.

7. Flex-flow
En kortvarig eiendom for flex-retning og flex-wrap.

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

9. Align-Self
Denne egenskapen overstyrer egenskapen til juster og brukes på flexelementer.

10. Flex
Den sier lengden på flex -elementer i forhold til andre elementer som er til stede i en flexbox.

La oss se et eksempel.

Eksempel
Nedenfor har vi vist deg et eksempel på hvordan du oppretter en flexbox.

Html

Punkt
Punkt
Punkt<
Punkt

Her har vi laget en div container som har klasse “flexbox” og hekker fire flere div containere inni den.

CSS

.flexbox
Display: Flex;
bakgrunnsfarge: akvamarin;

Først av alt tildeler vi Main Div Container en flex -skjerm for å gjøre det til en flexbox, og så gir vi den litt bakgrunnsfarge.

CSS

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

Til slutt styler vi flex -elementene som er til stede i Flexbox ved hjelp av forskjellige CSS -egenskaper.

Produksjon

En flexbox ble generert vellykket.

Konklusjon

En Flexbox er en layoutmodell som arrangerer elementer på en effektiv og dynamisk måte, samtidig som de gir dem like distribuerte rom inne i en beholder. 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 en flex -beholder og elementer som blir sett på som dens komponenter. Dessuten har den akser som er hoved- og kryss og den viser flere egenskaper. Denne oppskrivningen dekker alle nødvendige detaljer om en flexbox sammen med et passende eksempel.