Slik bruker du Flex for å gjøre nettstedet ditt mer responsivt

Moderne nettstedsdesign må være responsive på endringer i innhold eller nettleserstørrelsen. Du kan oppnå dette ved å bruke vanilla CSS, mediespørringer eller flexbox.

Visse flexegenskaper som flex-wrap eller flex-grow kan endre størrelsen eller plasseringen av et element på en visuelt tiltalende måte. Denne artikkelen vil gå gjennom eksempler på hvordan du kan bruke egenskapene flex-grow, flex-shrink, flex-wrap, flex-flow og order flex.

Hvordan sette opp CSS Flex Display

Hvis du ikke er kjent med det grunnleggende om flexbox, kan du utforske dette CodePen-kodebit. Den inkluderer eksempelkode for et enkelt flexbox-oppsett. Først må du pakke inn underordnede elementer under en overordnet div eller "flex container".

<div klasse="forelder">
<div klasse="barnevare"></div>
<div klasse="barnevare"></div>
<div klasse="barnevare"></div>
</div>

Legg til display: flex eiendom til overordnet div.

.forelder {
 display: flex;
}

Hvordan dyrke gjenstander i en beholder

De flex-vokse egenskapen lar de underordnede elementene utvides for å fylle den tilgjengelige plassen i dens overordnede div. Denne egenskapen lar deg spesifisere "forholdet" hvor mye plass hvert eskeelement kan ta opp.

For å legge til flex-grow, legg til flex-grow CSS-egenskapen til hvert av underelementene.

<div klasse="forelder">
<div stil="bakgrunnsfarge: rød; flex-grow: 1"></div>
<div stil="bakgrunnsfarge: oransje; flex-grow: 1"></div>
<div stil="bakgrunnsfarge: gul; flex-grow: 1"></div>
<div stil="bakgrunnsfarge: grønn; flex-grow: 3"></div>
<div stil="bakgrunnsfarge: blå; flex-grow: 1"></div>
</div>

.forelder {
 bredde: 500px;
 display: flex; 
}

En flex-vekst på 0 for hvert element betyr at boksene ikke utvides for å fylle plassen til foreldrene deres. 0 er standardverdien for denne egenskapen.

En flex-vekst på 1 for hver vare vil tvinge alle boksene til å utvide seg likt for å passe til den tilgjengelige plassen inne i forelderen.

Hvis en av varene hadde en større flex-vekst, for eksempel:

<div stil="bakgrunnsfarge: grønn; flex-grow: 3"></div>

Den grønne boksen vil forsøke å få opptil tre ganger så mye plass som de andre boksene.

Se koden for flex-grow-eiendommen i denne CodePen-kodebit for å se et fungerende eksempel.

Hvordan krympe gjenstander i en beholder

I noen tilfeller kan forelderens bredde krympe og gjenstandene inne i forelderen vil ikke lenger passe inn. Du kan bruke flex-krympe egenskap for å krympe størrelsen på boksene. På denne måten kan de holde seg inne i forelderen.

Flex-shrink lar deg spesifisere et forhold for hvor mye hver vare skal krympe.

Legg til flex-shrink-egenskapen til underordnede div-elementer. Endre bredden på foreldrene og barna slik at varene ikke passer inn i beholderen.

<div klasse="forelder">
<div stil="bakgrunnsfarge: rød; bøyelig krympe: 1"></div>
<div stil="bakgrunnsfarge: oransje; bøyelig krympe: 1"></div>
<div stil="bakgrunnsfarge: gul; bøyelig krympe: 1"></div>
<div stil="bakgrunnsfarge: grønn; bøyelig krympe: 2"></div>
<div stil="bakgrunnsfarge: blå; bøyelig krympe: 1"></div>
</div>

.forelder {
 bredde: 500px;
 display: flex; 
}
.forelder div {
 bredde: 150px;
 høyde: 150px;
}

En flex-shrink på 1 for alle varer betyr at alle varer vil krympe likt dersom foreldrenes bredde reduseres.

Hvis en av varene hadde en større bøyningskrympe, for eksempel:

<div stil="bakgrunnsfarge: grønn; bøyelig krympe: 2"></div>

Den grønne boksen vil forsøke å krympe dobbelt så mye som de andre boksene.

Se koden for flex-shrink-egenskapen i denne CodePen-kodebit for å se et fungerende eksempel.

Hvordan skyve gjenstander til neste rad

De flex-wrap egenskap lar deg skyve elementer til neste linje hvis de ikke passer innenfor bredden til den overordnede beholderen. Her krymper ikke varene, og du vil kunne bevare høyden og bredden på varene.

Alternativer for flex-wrap-eiendommen inkluderer:

flex-wrap: nowrap | vikle | wrap-revers

Legg til flex-wrap-egenskapen til den overordnede flex-beholderen. Sørg for at bredden på beholderen er liten nok, slik at den ikke passer til barnevarene inni den. Dette vil tvinge overfylte gjenstander til en ny rad.

<div klasse="forelder">
<div klasse="rød"></div>
<div klasse="oransje"></div>
<div klasse="gul"></div>
<div klasse="grønn"></div>
<div klasse="blå"></div>
</div>

.forelder {
 bredde: 300px;
 kantlinje: 1px helt svart;
 display: flex;
 flex-wrap: vikle;
}
.forelder div {
 bredde: 100px;
 høyde: 100px;
}

Innpakningsverdien vil plassere varene som starter øverst til høyre i beholderen. Innpaknings-omvendt-verdien vil omplassere elementene til å starte nederst til høyre i beholderen. Når du pakker inn elementene, vil den skyve elementer på en ny rad over i stedet for under.

Hvis du angir en høyde på den overordnede beholderen, vil beholderen legge til mellomrom mellom radene med elementer.

Hvis du vil fjerne denne avstanden, men beholde høyden på den overordnede div, bruk egenskapen align-content. Spesifiser egenskapen align-content som "flex-start" i den overordnede div:

.forelder { 
 bredde: 300px; 
 høyde: 300px;
 kantlinje: 1px helt svart; 
 display: flex;
 flex-wrap: vikle; 
 align-content: flex-start;
}

Egenskapen align-content er en av flere kjerner flexbox-egenskaper som lar deg kontrollere justering.

Se koden for flex-wrap-egenskapen i denne CodePen-kodebit for å se noen eksempler.

Slik skyver du elementer til neste kolonne

Hvis du bruker et annet oppsett (for eksempel en kolonne), og du fortsatt trenger at elementene skal pakkes inn, kan du bruke flex-flow eiendom. Denne flex-egenskapen er en kombinasjon av flex-wrap- og flex-direction-egenskapene.

Eksempler på alternativkombinasjoner som du kan bruke for flex-flow-egenskapen inkluderer:

flex-wrap: rad nowrap | kolonne nowrap | radomslag | kolonneomslag | rad wrap-revers | kolonneomslag-omvendt

Denne egenskapen fungerer på samme måte som flex-wrap-egenskapen ovenfor. Legg til flex-flow til den overordnede flex-beholderen. Sørg for at bredden til den overordnede beholderen er liten nok til å tvinge de underordnede elementene til å pakke inn:

.forelder {
 bredde: 300px; 
 kantlinje: 1px helt svart; 
 display: flex; 
 flex-flow: kolonneinnpakning;
}
.forelder div {
 bredde: 100px;
 høyde: 100px;
}

Elementene pakkes i den angitte retningen (rad eller kolonne).

Se koden for flex-flow-egenskapen i denne CodePen-kodebit for å se noen eksempler.

Hvordan endre rekkefølgen på varer

Hvis du trengte å omorganisere elementene på siden på grunn av noen form for dynamiske data, kan du bruke rekkefølge flex eiendom. Denne egenskapen lar deg spesifisere rekkefølgen som hvert element skal vises.

Tallene trenger ikke nødvendigvis å starte fra 1. Du kan bruke alle tall og intervaller, og ordreegenskapen vil sortere HTML-elementene fra laveste til høyeste.

Legg til ordreegenskapen til hver av varene i den overordnede flex-beholderen:

<div klasse="forelder">
<div klasse="rød" stil="rekkefølge: 2"></div>
<div klasse="oransje" stil="rekkefølge: 1"></div>
<div klasse="gul" stil="rekkefølge: 5"></div>
<div klasse="grønn" stil="rekkefølge: 4"></div>
<div klasse="blå" stil="rekkefølge: 3"></div>
</div>

I dette tilfellet vil den oransje boksen være lengst til høyre, etterfulgt av de røde, blå, grønne og deretter gule boksene.

Se koden for ordreegenskapen i denne CodePen-kodebit for å se noen eksempler.

Eksperimenter med flere CSS-egenskaper på nettstedet ditt

Du kan bruke disse flex-egenskapene for å gjøre nettstedet ditt mer responsivt. Dette inkluderer bruk av egenskapene flex-grow, flex-shrink, flex-wrap, flex-flow og order flex.

Du kan også lære om flere fleksegenskaper for å hjelpe deg med å justere HTML-elementene på nettstedet ditt.

Slik bruker du Flex for å justere HTML-elementer

Les Neste

Om forfatteren