Tussenruimte met gap in flex

gap maakt ruimte tussen flex-items of flexregels. Het voegt geen buitenrand rondom de hele container toe. Wil je ook ruimte langs de rand, gebruik dan bijvoorbeeld padding op de container en beoordeel die afzonderlijk.

Begin met één gap-waarde als de afstand in beide richtingen gelijk mag zijn. Bij twee waarden geeft de eerste de rijafstand en de tweede de kolomafstand, met de uiteindelijke werking afhankelijk van de flexrichting. Combineer gap niet gedachteloos met marges op alle kinderen: beide kunnen aan de ruimte bijdragen. Bekijk een afgebroken rij op een smal scherm om te zien of de afstanden nog passen.

Voorbeeld

.rij { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1rem; }

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

Verder binnen dit onderwerp: Flex-items over regels verdelen.