Flex gebruiken om uw website responsiever te maken

Moderne website-ontwerpen moeten reageren op veranderingen in inhoud of de browsergrootte. U kunt dit bereiken met behulp van vanilla CSS, mediaquery's of flexbox.

Bepaalde flex-eigenschappen zoals flex-wrap of flex-grow kunnen de grootte of locatie van een element op een visueel aantrekkelijke manier veranderen. In dit artikel worden voorbeelden besproken van hoe u de eigenschappen flex-grow, flex-shrink, flex-wrap, flex-flow en order flex kunt gebruiken.

Hoe CSS Flex-weergave in te stellen

Als je niet bekend bent met de basis van flexbox, je kunt dit verkennen CodePen-fragment. Het bevat voorbeeldcode voor een eenvoudige flexbox-opstelling. Eerst moet u de onderliggende items onder een bovenliggende div of "flexcontainer" plaatsen.

<div klasse="ouder">
<div klasse="kind-item"></div>
<div klasse="kind-item"></div>
<div klasse="kind-item"></div>
</div>

Voeg de. toe weergave: flex eigendom aan de bovenliggende div.

.ouder {
 weergave: flexibel;
}

Hoe items in een container te laten groeien?

De flex-groeien

eigenschap stelt de onderliggende items in staat om uit te breiden om de beschikbare ruimte in de bovenliggende div te vullen. Met deze eigenschap kunt u de "ratio" hoeveelheid ruimte specificeren die elk doositem kan innemen.

Om flex-grow toe te voegen, voegt u de flex-grow CSS-eigenschap toe aan elk van de onderliggende items.

<div klasse="ouder">
<div stijl="achtergrondkleur: rood; flex-groeien: 1"></div>
<div stijl="achtergrondkleur: oranje; flex-groeien: 1"></div>
<div stijl="achtergrondkleur: geel; flex-groeien: 1"></div>
<div stijl="achtergrondkleur: groen; flex-groei: 3"></div>
<div stijl="achtergrondkleur: blauw; flex-groeien: 1"></div>
</div>

.ouder {
 breedte: 500px;
 weergave: flexibel; 
}

Een flex-grow van 0 voor elk item betekent dat de vakken niet groter worden om de ruimte van hun bovenliggende te vullen. 0 is de standaardwaarde voor deze eigenschap.

Een flex-grow van 1 voor elk item dwingt alle dozen om gelijkmatig uit te breiden om in de beschikbare ruimte in het bovenliggende element te passen.

Als een van de items een grotere flexgroei had, bijvoorbeeld:

<div stijl="achtergrondkleur: groen; flex-groei: 3"></div>

Het groene vakje zal proberen tot drie keer zoveel ruimte te winnen als de andere vakjes.

Bekijk hierin de code voor het flex-grow pand CodePen-fragment een werkend voorbeeld te zien.

Artikelen in een container verkleinen

In sommige gevallen kan de breedte van het bovenliggende element kleiner worden en passen de items in het bovenliggende element er niet meer in. U kunt de flex-shrink eigenschap om de grootte van de dozen te verkleinen. Op deze manier kunnen ze binnen de ouder blijven.

Met Flex-shrink kunt u een verhouding specificeren voor hoeveel elk item moet krimpen.

Voeg de eigenschap flex-shrink toe aan de onderliggende div-items. Wijzig de breedte van de bovenliggende en onderliggende items zodat de items niet in de container passen.

<div klasse="ouder">
<div stijl="achtergrondkleur: rood; flex-shrink: 1"></div>
<div stijl="achtergrondkleur: oranje; flex-shrink: 1"></div>
<div stijl="achtergrondkleur: geel; flex-shrink: 1"></div>
<div stijl="achtergrondkleur: groen; flex-shrink: 2"></div>
<div stijl="achtergrondkleur: blauw; flex-shrink: 1"></div>
</div>

.ouder {
 breedte: 500px;
 weergave: flexibel; 
}
.ouder div {
 breedte: 150px;
 hoogte: 150px;
}

Een flex-shrink van 1 voor alle items betekent dat alle items evenveel krimpen als de bovenliggende breedte wordt verkleind.

Als een van de items een grotere flex-shrink had, bijvoorbeeld:

<div stijl="achtergrondkleur: groen; flex-shrink: 2"></div>

De groene doos zal twee keer zoveel proberen te krimpen als de andere dozen.

Bekijk hierin de code voor de eigenschap flex-shrink CodePen-fragment een werkend voorbeeld te zien.

Items naar de volgende rij pushen

De flex-wrap eigenschap kunt u items naar de volgende regel pushen als ze niet binnen de breedte van de bovenliggende container passen. Hier krimpen de artikelen niet en behoudt u de hoogte en breedte van de artikelen.

Opties voor de eigenschap flex-wrap zijn onder meer:

flex-wrap: nowrap | wikkel | omslag-omgekeerde

Voeg de eigenschap flex-wrap toe aan de bovenliggende flex-container. Zorg ervoor dat de breedte van de container klein genoeg is, zodat de onderliggende items er niet in passen. Dit dwingt alle overlopende items naar een nieuwe rij.

<div klasse="ouder">
<div klasse="rood"></div>
<div klasse="oranje"></div>
<div klasse="geel"></div>
<div klasse="groente"></div>
<div klasse="blauw"></div>
</div>

.ouder {
 breedte: 300px;
 rand: 1px effen zwart;
 weergave: flexibel;
 flexomslag: omslag;
}
.ouder div {
 breedte: 100px;
 hoogte: 100px;
}

De wrap-waarde plaatst de items in de rechterbovenhoek van de container. Met de waarde 'omloopomgekeerd' worden de items opnieuw gepositioneerd om rechtsonder in de container te beginnen. Bij het inpakken van de items worden items op een nieuwe rij erboven geduwd in plaats van eronder.

Als u een hoogte opgeeft voor de bovenliggende container, voegt de container ruimte toe tussen de rijen met items.

Als u deze afstand wilt verwijderen, maar de hoogte van de bovenliggende div wilt behouden, gebruikt u de eigenschap align-content. Geef de eigenschap align-content op als "flex-start" in de bovenliggende div:

.ouder { 
 breedte: 300px; 
 hoogte: 300px;
 rand: 1px effen zwart; 
 weergave: flexibel;
 flexomslag: omslag; 
 align-content: flex-begin;
}

De eigenschap align-content is een van de vele core flexbox-eigenschappen waarmee u de uitlijning kunt regelen.

Bekijk hierin de code voor de flex-wrap eigenschap CodePen-fragment enkele voorbeelden te zien.

Items naar de volgende kolom pushen

Als u een andere lay-out gebruikt (zoals een kolom) en u nog steeds de elementen nodig heeft om terug te lopen, kunt u de gebruiken flex-flow eigendom. Deze flexeigenschap is een combinatie van de flex-wrap en flex-directionele eigenschappen.

Voorbeelden van optiecombinaties die u kunt gebruiken voor de eigenschap flex-flow zijn:

flex-wrap: rij nowrap | kolom nurap | rijomslag | kolomomslag | rij omslag-omgekeerd | kolomomslag-omgekeerd

Deze eigenschap werkt op dezelfde manier als de eigenschap flex-wrap hierboven. Voeg flex-flow toe aan de bovenliggende flexcontainer. Zorg ervoor dat de breedte van de bovenliggende container klein genoeg is om de onderliggende items te forceren om te wikkelen:

.ouder {
 breedte: 300px; 
 rand: 1px effen zwart; 
 weergave: flexibel; 
 flex-flow: kolomomslag;
}
.ouder div {
 breedte: 100px;
 hoogte: 100px;
}

De items wikkelen zich in de opgegeven richting (rij of kolom).

Bekijk hierin de code voor de eigenschap flex-flow CodePen-fragment enkele voorbeelden te zien.

De volgorde van artikelen wijzigen

Als u de items op de pagina opnieuw moet rangschikken vanwege dynamische gegevens, kunt u de volgorde flex eigendom. Met deze eigenschap kunt u de volgorde specificeren waarin elk item wordt weergegeven.

De getallen hoeven niet per se bij 1 te beginnen. U kunt alle getallen en intervallen gebruiken, en de eigenschap order zal de HTML-elementen van laag naar hoog rangschikken.

Voeg de ordereigenschap toe aan elk van de items in de bovenliggende flexcontainer:

<div klasse="ouder">
<div klasse="rood" stijl="bestelling: 2"></div>
<div klasse="oranje" stijl="bestelling: 1"></div>
<div klasse="geel" stijl="bestelling: 5"></div>
<div klasse="groente" stijl="bestelling: 4"></div>
<div klasse="blauw" stijl="bestelling: 3"></div>
</div>

In dit geval bevindt het oranje vak zich aan de rechterkant, gevolgd door de rode, blauwe, groene en vervolgens gele vakken.

Bekijk hierin de code voor de besteleigenschap CodePen-fragment enkele voorbeelden te zien.

Experimenteren met meer CSS-eigenschappen op uw website

Deze flex eigenschappen kun je gebruiken om je website responsive te maken. Dit omvat het gebruik van de eigenschappen flex-grow, flex-shrink, flex-wrap, flex-flow en order flex.

U kunt ook leren over meer flex-eigenschappen om u te helpen de HTML-elementen op uw website uit te lijnen.

Flex gebruiken om HTML-elementen uit te lijnen

Lees volgende

Over de auteur