CSS Flexbox Navbar — Logo links, links rechts
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 flexbox-generator met de voorinstelling voor de klassieke navbar-lay-out: justify-content staat op space-between en align-items op center. Zet een logo in het eerste vak en een rij navigatielinks in het laatste (of verdeel de links over de middelste vakken) en de flexbox-container duwt ze naar de tegenovergestelde uiteinden van de balk, terwijl elk item op dezelfde verticale middellijn blijft staan, hoe hoog het logo of de linktekst ook is.
space-between is wat dit laat werken: het zet de eerste child tegen de startrand en de laatste child tegen de eindrand, en verdeelt vervolgens eventuele overige children gelijkmatig ertussen — precies het logo-links, links-rechts patroon dat bijna elke siteheader gebruikt. align-items: center lost daarna de verticale uitlijning op waar je voorheen line-height-hacks of table-cell-trucs voor nodig had.
Pas het aantal children aan zodat het overeenkomt met je echte navbar — twee vakken voor een kale logo-en-knop-balk, meer voor een logo plus meerdere links — en zie hoe de lay-out live meebeweegt. Kopieer het CSS-blok zodra het op je header lijkt, of open de space-between-voorinstelling als je die ene eigenschap naast zijn naaste verwanten wilt zien.