justify-content: space-between uitgelegd (CSS)
Bouw visueel een CSS-flexbox-lay-out: flex-direction, justify-content, align-items, flex-wrap en gap op de container, plus voor elke child flex-grow, flex-shrink en flex-basis, allemaal met een live voorbeeld en kopieerbare CSS.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de generator met justify-content ingesteld op space-between: het eerste vak zit strak tegen de startrand van de container, het laatste vak zit strak tegen de eindrand, en de overgebleven ruimte wordt verdeeld in gelijke tussenruimtes tussen de vakken in het midden — nooit vóór het eerste of na het laatste vak.
Dat is het detail waar mensen in de war raken. space-around geeft elk vak een gelijke marge aan beide kanten, waardoor de tussenruimtes tussen vakken twee keer zo breed worden als de tussenruimtes aan de twee buitenste randen (elke rand krijgt maar de marge van één vak, niet van twee). space-evenly gaat nog een stap verder en maakt elke tussenruimte even groot, inclusief de twee buitenste randen — de enige van de drie waarbij de afstand er over de hele breedte perfect uniform uitziet.
Schakel de justify-content-dropdown hieronder tussen de drie waarden en zie hoe dezelfde drie vakken zich herschikken — het is de snelste manier om het verschil te zien in plaats van het uit je hoofd te leren. Kopieer de CSS voor degene die overeenkomt met de afstand die je echt wilt.