⭐ 0
🔍
Tekst Afbeelding PDF & Documenten Audio Muziek Elektronica Tijd Hulpprogramma's Validators Esoterie Spellen

CSS Flexbox-navigatiebalk — Logo links, links rechts

Bouw visueel een CSS-flexbox-indeling: flex-direction, justify-content, align-items, flex-wrap en gap op de container, plus flex-grow, flex-shrink en flex-basis per kind, allemaal met een live preview en kopieerbare CSS.

Verwerken... 0%

Resultaat

Op deze pagina wordt de voorinstelling van de flexbox-generator geopend in de klassieke navigatiebalkindeling: inhoud uitvullen ingesteld op spatie tussen en items uitlijnen ingesteld op centreren. Plaats 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 tegenovergestelde uiteinden van de balk terwijl elk item op hetzelfde verticale midden wordt uitgelijnd, ongeacht hoe groot het logo of de linktekst is.

space-between zorgt ervoor dat dit werkt: het zet het eerste kind vast aan de beginrand en het laatste kind aan de eindrand, en verdeelt vervolgens de resterende kinderen gelijkmatig tussen hen in - precies de vorm van het linkerlogo en de rechterlinks die bijna elke sitekop gebruikt. align-items: center lost vervolgens de verticale uitlijning op waarvoor vroeger hacks op lijnhoogte of weergavetrucs in tabelcellen nodig waren.

Pas het aantal kinderen aan zodat het overeenkomt met uw echte navigatiebalk (twee vakken voor een kale logo- en CTA-balk, meer voor het logo plus verschillende links) en zie hoe de lay-out live wordt aangepast. Kopieer het CSS-blok zodra het overeenkomt met uw header, of open de space-between-voorinstelling als u die ene eigenschap wilt vergelijken met zijn naaste verwanten.

🛡️
Uitgevoerd in browser

Uw bestanden en invoer verlaten dit apparaat nooit. Verwerking verloopt volledig offline. 100% veilig.

Geaccepteerde formaten & regels

  • Containerbedieningselementen: flex-direction, justify-content, align-items, flex-wrap en een gap-invoer in pixels, live toegepast op de preview.
  • Standaard drie kleurgecodeerde onderliggende vakken (optellen tot acht, verwijderen tot twee), elk met zijn eigen velden voor flex-grow, flex-shrink en flex-basis.
  • Kopieerbaar CSS-blok met een .flex-containerregel plus één .flex-item-N-regel per kind met niet-standaard flex-eigenschappen.

Belangrijkste voordelen

✓ Elke containercontrole en de flex-grow, flex-shrink en flex-basis van elk kind updaten drie genummerde voorbeeldvakken live, zodat u precies ziet wat uw flexbox-regels doen voordat u een stylesheet aanraakt.
✓ De generator drukt alleen onderliggende regels af die daadwerkelijk verschillen van de CSS-standaardwaarden, zodat de gekopieerde code kort en leesbaar blijft in plaats van dat flex-grow: 0 in elk vak wordt herhaald.
✓ Vooraf ingestelde pagina's lossen de lay-outs op waarnaar mensen op naam zoeken: een div centreren, een logo-links-rechts navigatiebalk en flexibele kolommen van gelijke breedte - open er één en de tool is al geconfigureerd.

Toepassingen

  • • Verkrijg de exacte CSS om een div zowel horizontaal als verticaal te centreren door te kijken hoe de justify-content en align-items werken in live preview-vakken.
  • • Bouw een navigatiebalkindeling met logo links en links rechts met ruimte tussen en uitlijnitems: centreren en kopieer vervolgens de container-CSS rechtstreeks naar uw headercomponent.
  • • Vergelijk de ruimte tussen, de ruimte eromheen en de ruimte gelijkmatig naast elkaar op dezelfde drie vakken, in plaats van te raden welke overeenkomt met de gewenste afstand.