Gelijkbrede Flexbox-kolommen — CSS-generator
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 flex-grow: 1 al ingesteld op alle drie de voorbeeldvakken. Kijk ernaar: in plaats van te krimpen tot de grootte van hun inhoud, claimt elk vak een gelijk deel van de overgebleven ruimte in de rij — dat is het hele recept voor gelijkbrede flexibele kolommen, zonder percentagebreedtes, zonder calc() en zonder vaste pixelberekeningen die je moet bijhouden.
flex-grow: 1 zegt tegen een child dat hij moet groeien, en als je het op elke child in de rij instelt, groeien ze allemaal met dezelfde hoeveelheid, zodat ze even breed worden, ongeacht hoeveel het er zijn of welke inhoud erin zit. Voeg een vak toe of verwijder er een met de instellingen hieronder en de resterende kolommen verdelen zich meteen opnieuw om gelijk te blijven — als je een browservenster over deze lay-out in productie heen verkleint, gedraagt het zich precies zo.
Dit is het patroon achter kaartrasters met gelijke hoogte, prijstabelkolommen en gelijkmatig verdeelde footersecties. Geef een kolom meer ruimte door zijn flex-grow hoger te zetten dan de andere, of kopieer het CSS-blok hieronder precies zoals gegenereerd voor een strakke gelijke verdeling.