In deze handleiding gaat het over een van de krachtigste functionaliteit van CSS Flexbox: de Flex-Wrap. Flexbox vereenvoudigt aanzienlijk het organiseren en uitlijnen van elementen in website-lay-outs. Wanneer de ruimte in de container beperkt is, maakt de Flex-Wrap het mogelijk dat de kind-elementen worden afgebroken in plaats van te krimpen. Dit helpt bij het creëren van aantrekkelijke en responsieve ontwerpen. We zullen de werking van Flex-Wrap, de verschillende waarden en toepassingsvoorbeelden onderzoeken.
De video wordt pas bij het afspelen van YouTube geladen – daarbij worden gegevens (o.a. het IP-adres) naar YouTube/Google verzonden. Meer in de privacyverklaring
Belangrijkste inzichten
- Flexbox maakt een responsief ontwerp van websites mogelijk.
- Met flex-wrap kunt u controleren of en hoe kinderelenementen worden afgebroken wanneer de ruimte in de container opraakt.
- Er zijn drie hoofdwaarden voor flex-wrap: nowrap, wrap en wrap-reverse.
- De juiste configuratie van align-items en justify-content kan het ontwerp verder optimaliseren.
Stapsgewijze handleiding
Stap 1: De Flex Container maken
Maak eerst een Flex-container aan. Stel de display-waarde in op flex voor het element dat de kind-elementen bevat.
Stap 2: Flex-Wrap activeren
Om het ombuiggedrag te activeren, moet u de eigenschap flex-wrap op wrap instellen. Dit zorgt ervoor dat de kind-elementen naar de volgende regel worden verplaatst wanneer er niet genoeg ruimte is.
Stap 3: Pas de kind-elementen aan
Voeg nu kind-elementen toe om te testen hoe ze zich gedragen wanneer ze worden afgebroken. U kunt hun breedte gedeeltelijk instellen; het belangrijkste is dat de container kleiner is dan de som van de breedtes van de kind-elementen.
Stap 4: Flex-Wrap controleren
Zodra u de kind-elementen heeft toegevoegd, controleer dan het gedrag van de container. U zou moeten zien dat de laatste kind-elementen naar de volgende regel worden verplaatst als er niet genoeg ruimte in de container is.
Stap 5: Flex-richting aanpassen
U kunt ook de Flex-richting instellen op column als u wilt werken met een verticale lay-out. In dat geval zal de lay-out zich anders gedragen en zich ook aanpassen aan de hoogte.
Stap 6: Kind-elementen uitlijnen
Gebruik align-items om de kind-elementen binnen de rijen te positioneren. U kunt het instellen op waarden zoals flex-start, flex-end of center om de verticale uitlijning te regelen.
Stap 7: Justify-Content instellen
De eigenschap justify-content helpt u bij het beheren van de ruimte tussen de kind-elementen in een regel. Er zijn meerdere opties, zoals space-between, space-around of flex-start. Probeer deze uit om te zien hoe uw lay-out reageert.
Stap 8: Responsief ontwerp voor browsers
Een van de sterke punten van FlexWrap is de responsiviteit. U kunt de container breder of smaller maken en zien hoe de kind-elementen zich aanpassen afhankelijk van de beschikbare ruimte. Dit is bijzonder belangrijk als u ontwerpen voor verschillende apparaatformaten wilt maken.
Stap 9: Wrap-Reverse gebruiken
Om de elementen in omgekeerde volgorde weer te geven, stelt u flex-wrap in op wrap-reverse. Dit brengt de kind-elementen van onder naar boven naar de volgende regel.
Stap 10: Implementatie in verschillende lay-outs
De Flex-Wrap kan worden gebruikt in veel lay-outs: van grote galerijen tot eenvoudige vakken. Pas de afmetingen en de lay-out naar wens aan om het beste resultaat te behalen.
Samenvatting
In deze handleiding hebt u geleerd hoe u de Flex-Wrap-eigenschap in CSS kunt gebruiken. Flexbox biedt een geweldige manier om responsieve webontwerpen te maken. Met slechts een paar regels CSS kunt u gemakkelijk kind-elementen positioneren en aanpassen om een aantrekkelijke lay-out te creëren die er geweldig uitziet op verschillende schermformaten.
Veelgestelde vragen
Wat is Flexbox?Flexbox is een lay-outmodule in CSS waarmee elementen binnen een container flexibel kunnen worden gerangschikt en uitgelijnd.
Hoe werkt flex-wrap?De eigenschap flex-wrap beheert hoe de kind-elementen in de flex-container worden afgebroken wanneer er onvoldoende ruimte is.
Welke waarden kan flex-wrap aannemen?flex-wrap kan de waarden nowrap, wrap en wrap-reverse aannemen.
Hoe kan ik het lay-out responsief maken?Door Flexbox en flex-wrap te gebruiken, kunt u inhoud aanpassen afhankelijk van de beschikbare ruimte in de container.
Welke invloed heeft align-items op de lay-out?align-items bepaalt hoe de kind-elementen verticaal worden uitgelijnd binnen de rijen.
