Flexbox-indeling: Zo verdeel je kinderelementen gelijkmatig

Flexbox is een krachtige lay-outmodule in CSS dat je helpt om de beschikbare ruimte binnen een container efficiënt te benutten. In deze zelfstudie zul je leren hoe je kind-elementen gelijkmatig kunt verdelen in een Flex-container. Dit is vooral handig voor responsieve ontwerpen waarbij de breedte van het venster kan veranderen. Laten we eraan beginnen!

Belangrijkste inzichten

• Met Flexbox kun je kind-elementen in de lay-out gelijkmatig verdelen door de Flex-waarden van de elementen dienovereenkomstig in te stellen.
• Je kunt de breedte en hoogte van de kind-elementen flexibel maken, zodat ze zich automatisch aanpassen aan de beschikbare ruimte zonder vaste afmetingen te moeten gebruiken.

Stapsgewijze handleiding

Om te begrijpen hoe je kind-elementen gelijkmatig kunt verdelen in een Flex-container, volg deze stappen:

Eerst maak je een Flex-container door de CSS-eigenschap display: flex; toe te passen. Hier is een eenvoudig voorbeeld van hoe je dat kunt doen. Zorg ervoor dat de container is uitgelijnd in de rij-indeling:

In deze staat wordt de ruimte gelijkmatig verdeeld over alle kind-elementen, zolang deze kind-elementen geen vaste breedtes hebben. Als je de breedte van de kind-elementen instelt en vervolgens op 100 pixels zet, worden deze wel gelijkmatig verdeeld in de container, maar dat is niet optimaal voor een responsief ontwerp:

Als je de vaste breedtes verwijdert, zie je snel dat de ruimte aanzienlijk wordt verminderd, vooral als de tekst in de kind-elementen ontbreekt. In dit geval klapt alles in tot de minimale breedte die door de tekst wordt gedefinieerd:

Om de ruimte gelijkmatig te verdelen, moet je de Flex-waarde voor de kind-elementen instellen. Dit kan eenvoudig worden gedaan door de toepassing van de flex-eigenschap die je in staat stelt een proportioneel deel van de beschikbare ruimte te definiëren. Zet de Flex-waarde van elk kind-element op 1:

Als je dat hebt gedaan, zie je dat alle kind-elementen de ruimte gelijkmatig hebben verdeeld. Het is een zeer flexibele oplossing, omdat het dynamisch aanpast aan de breedte van de container:

Je kunt ook variëren met de Flex-waarden om verschillende verhoudingen te creëren. Als het eerste element bijvoorbeeld de helft van de ruimte moet krijgen, zou je het kunnen instellen op flex: 2; terwijl de andere elementen flex: 1; behouden:

Nadat je de waarden hebt aangepast, worden de kind-elementen verdeeld volgens de ingestelde waarden. Door de flexibele verhoudingen die je hebt toegewezen, krijgt het eerste element meer ruimte dan de andere:

Als je de breedte van de container wijzigt, blijven de verhoudingen stabiel. Of je nu de breedte op 800 pixels of 400 pixels wijzigt, de kind-elementen passen zich automatisch aan en verdelen de ruimte gelijkmatig op basis van de eerder ingestelde Flex-waarden:

Je kunt de Flexbox-eigenschappen ook eenvoudig aanpassen door de flex-direction-eigenschap te wijzigen. Als je de Flex-container bijvoorbeeld van rij naar kolom wijzigt, blijft de logica van de verdeling hetzelfde. De kind-elementen worden dan verticaal gerangschikt:

Zorg ervoor dat de hoogte van de kind-elementen niet is ingesteld om de flexibiliteit te behouden. Dit werkt vooral goed voor responsieve ontwerpen, aangezien de kind-elementen zich aanpassen aan de schermgrootte en -oriëntatie:

Op deze manier kun je een sterk responsief ontwerp maken, waardoor je ervoor kunt zorgen dat je ontwerp er geweldig uitziet op zowel desktop als mobiel.

Samenvatting

In deze tutorial heb je geleerd hoe je Flexbox in CSS en HTML gebruikt om kinderelementen gelijkmatig te verdelen. Met de Flex-eigenschappen kun je responsieve layouts maken die naadloos passen bij verschillende schermgroottes en -formaten.