Elementen met flex verdelen

Flexbox verdeelt directe kinderen van een container langs een hoofdas. Het is geschikt voor een rij of kolom onderdelen waarbij de beschikbare ruimte tussen die onderdelen moet worden verdeeld. De container krijgt display: flex.

Bepaal eerst de leesvolgorde in HTML. Een visueel omgedraaide volgorde is niet vanzelf dezelfde volgorde voor toetsenbordgebruik of voorleessoftware. Begin met een gewone rij en voeg pas instellingen toe als je ziet wat er ontbreekt. Flex-items staan standaard zonder afbreken op één regel. Op een smal scherm kan daardoor te weinig ruimte ontstaan; controleer dat voordat je de indeling overneemt.

Voorbeeld

.rij { display: flex; gap: 1rem; }

Naslag: MDN Web Docs over dit onderdeel. De uitleg hierboven is zelfstandig geformuleerd.

Verder binnen dit onderwerp: Tussenruimte met gap in flex.