Sådan bruger du Flex til at gøre din hjemmeside mere responsiv

Moderne hjemmesidedesign skal være lydhør over for ændringer i indhold eller browserstørrelse. Du kan opnå dette ved at bruge vanilla CSS, medieforespørgsler eller flexbox.

Visse flexegenskaber såsom flex-wrap eller flex-grow kan ændre størrelsen eller placeringen af ​​et element på en visuelt tiltalende måde. Denne artikel vil gennemgå eksempler på, hvordan du kan bruge egenskaberne flex-grow, flex-shrink, flex-wrap, flex-flow og ordre flex.

Sådan opsætter du CSS Flex Display

Hvis du ikke er bekendt med det grundlæggende i flexbox, kan du udforske dette CodePen-uddrag. Det inkluderer eksempelkode til en simpel flexbox-opsætning. Først skal du pakke de underordnede varer ind under en overordnet div eller "flex container".

<div klasse="forælder">
<div klasse="børnevare"></div>
<div klasse="børnevare"></div>
<div klasse="børnevare"></div>
</div>

Tilføj display: flex ejendom til overordnet div.

.forælder {
 display: flex;
}

Sådan dyrker du genstande i en container

Det flex-grow egenskaben giver de underordnede elementer mulighed for at udvide for at udfylde den ledige plads i dens overordnede div. Denne egenskab giver dig mulighed for at angive "forholdet" mængden af ​​plads, som hver kassevare kan optage.

For at tilføje flex-grow skal du tilføje flex-grow CSS-egenskaben til hvert af de underordnede elementer.

<div klasse="forælder">
<div stil="baggrundsfarve: rød; flex-grow: 1"></div>
<div stil="baggrundsfarve: orange; flex-grow: 1"></div>
<div stil="baggrundsfarve: gul; flex-grow: 1"></div>
<div stil="baggrundsfarve: grøn; flex-grow: 3"></div>
<div stil="baggrundsfarve: blå; flex-grow: 1"></div>
</div>

.forælder {
 bredde: 500px;
 display: flex; 
}

En flex-grow på 0 for hver vare betyder, at boksene ikke udvides til at fylde deres forælders plads. 0 er standardværdien for denne egenskab.

En flex-grow på 1 for hver vare vil tvinge alle kasser til at udvide sig lige meget for at passe til den tilgængelige plads inde i forælderen.

Hvis en af ​​genstandene havde en større flex vokse, for eksempel:

<div stil="baggrundsfarve: grøn; flex-grow: 3"></div>

Den grønne boks vil forsøge at vinde op til tre gange så meget plads som de andre kasser.

Se koden for flex-grow-ejendommen i denne CodePen-uddrag for at se et fungerende eksempel.

Sådan krymper du genstande i en container

I nogle tilfælde kan forælderens bredde krympe, og genstandene inde i forælderen vil ikke længere passe ind. Du kan bruge flex-krympe egenskab for at formindske størrelsen af ​​kasserne. På denne måde kan de forblive indeholdt i forælderen.

Flex-shrink giver dig mulighed for at angive et forhold for, hvor meget hver vare skal krympe.

Tilføj egenskaben flex-shrink til de underordnede div-elementer. Skift bredden på forældre og børn, så genstandene ikke passer ind i beholderen.

<div klasse="forælder">
<div stil="baggrundsfarve: rød; flex-shrink: 1"></div>
<div stil="baggrundsfarve: orange; flex-shrink: 1"></div>
<div stil="baggrundsfarve: gul; flex-shrink: 1"></div>
<div stil="baggrundsfarve: grøn; flex-shrink: 2"></div>
<div stil="baggrundsfarve: blå; flex-shrink: 1"></div>
</div>

.forælder {
 bredde: 500px;
 display: flex; 
}
.forælder div {
 bredde: 150px;
 højde: 150px;
}

En flex-shrink på 1 for alle varer betyder, at alle varer krymper lige meget, hvis forælderens bredde reduceres.

Hvis et af emnerne havde en større flex-shrink, for eksempel:

<div stil="baggrundsfarve: grøn; flex-shrink: 2"></div>

Den grønne boks vil forsøge at krympe dobbelt så meget som de andre kasser.

Se koden for flex-shrink-ejendommen i denne CodePen-uddrag for at se et fungerende eksempel.

Sådan skubbes genstande til næste række

Det flex-indpakning egenskab giver dig mulighed for at skubbe elementer til næste linje, hvis de ikke passer inden for bredden af ​​den overordnede container. Her krymper varerne ikke, og du vil kunne bevare varernes højde og bredde.

Mulighederne for flex-wrap-ejendommen omfatter:

flex-wrap: nowrap | vikle | wrap-reverse

Tilføj egenskaben flex-wrap til den overordnede flex-container. Sørg for, at bredden af ​​beholderen er lille nok, så den ikke passer til børnegenstandene i den. Dette vil tvinge alle overfyldte elementer til en ny række.

<div klasse="forælder">
<div klasse="rød"></div>
<div klasse="orange"></div>
<div klasse="gul"></div>
<div klasse="grøn"></div>
<div klasse="blå"></div>
</div>

.forælder {
 bredde: 300px;
 kant: 1px ensfarvet sort;
 display: flex;
 flex-wrap: wrap;
}
.forælder div {
 bredde: 100px;
 højde: 100px;
}

Indpakningsværdien placerer emnerne, der starter øverst til højre i beholderen. Indpaknings-omvendt værdien vil omplacere emnerne for at starte nederst til højre i beholderen. Når du pakker genstandene ind, vil den skubbe genstande på en ny række over i stedet for under.

Hvis du angiver en højde på den overordnede container, tilføjer containeren mellemrum mellem rækkerne af varer.

Hvis du vil fjerne dette mellemrum, men beholde højden af ​​den overordnede div, skal du bruge egenskaben align-content. Angiv egenskaben align-content som "flex-start" i den overordnede div:

.forælder { 
 bredde: 300px; 
 højde: 300px;
 kant: 1px ensfarvet sort; 
 display: flex;
 flex-wrap: wrap; 
 align-content: flex-Start;
}

Egenskaben align-content er en af ​​flere kerner flexbox-egenskaber, der giver dig mulighed for at kontrollere justering.

Se koden for flex-wrap-ejendommen i denne CodePen-uddrag for at se nogle eksempler.

Sådan skubber du elementer til den næste kolonne

Hvis du bruger et andet layout (såsom en kolonne), og du stadig skal bruge elementerne til at ombryde, kan du bruge flex-flow ejendom. Denne flex-egenskab er en kombination af flex-wrap- og flex-direction-egenskaberne.

Eksempler på kombinationer af muligheder, som du kan bruge til flex-flow-egenskaben inkluderer:

flex-wrap: række nurap | kolonne nurap | rækkeomslag | kolonneomslag | række wrap-reverse | kolonneomvikling-omvendt

Denne egenskab fungerer på samme måde som flex-wrap-egenskaben ovenfor. Tilføj flex-flow til den overordnede flex-beholder. Sørg for, at den overordnede containers bredde er lille nok til at tvinge de underordnede elementer til at pakke:

.forælder {
 bredde: 300px; 
 kant: 1px ensfarvet sort; 
 display: flex; 
 flex-flow: kolonneindpakning;
}
.forælder div {
 bredde: 100px;
 højde: 100px;
}

Elementerne ombrydes i den angivne retning (række eller kolonne).

Se koden for flex-flow-egenskaben i denne CodePen-uddrag for at se nogle eksempler.

Sådan ændres rækkefølgen af ​​varer

Hvis du havde brug for at omarrangere elementerne på siden på grund af enhver form for dynamisk data, kan du bruge bestille flex ejendom. Denne egenskab giver dig mulighed for at angive den rækkefølge, som hvert element vises.

Tallene behøver ikke nødvendigvis at starte fra 1. Du kan bruge alle tal og intervaller, og ordreegenskaben vil sortere HTML-elementerne fra laveste til højeste.

Tilføj ordreegenskaben til hver af elementerne i den overordnede flex-beholder:

<div klasse="forælder">
<div klasse="rød" stil="rækkefølge: 2"></div>
<div klasse="orange" stil="ordre: 1"></div>
<div klasse="gul" stil="rækkefølge: 5"></div>
<div klasse="grøn" stil="rækkefølge: 4"></div>
<div klasse="blå" stil="rækkefølge: 3"></div>
</div>

I dette tilfælde vil det orange felt være længst til højre efterfulgt af de røde, blå, grønne og derefter gule felter.

Se koden for ordreegenskaben i denne CodePen-uddrag for at se nogle eksempler.

Eksperimenter med flere CSS-egenskaber på dit websted

Du kan bruge disse flex-egenskaber til at gøre din hjemmeside mere responsiv. Dette inkluderer brug af egenskaberne flex-grow, flex-shrink, flex-wrap, flex-flow og ordre flex.

Du kan også lære om flere flexegenskaber for at hjælpe dig med at tilpasse HTML-elementerne på dit websted.

Sådan bruges Flex til at justere HTML-elementer

Læs Næste

Om forfatteren