⭐ 0
🔍
Text Obrázok PDF a Dokumenty Audio Hudba Elektronika Čas Užitočné programy Validátory Ezoterika Hry

CSS Flexbox Navbar — Logo vľavo, odkazy vpravo

Vizuálne vytvorte rozloženie CSS flexbox: ohybné smerovanie, zarovnanie obsahu, zarovnanie položiek, ohybný obal a medzera na kontajneri, plus flex-grow, flex-shrink a flex-base na dieťa, to všetko so živým náhľadom a kopírovateľným CSS.

Spracovanie... 0%

Výsledok

Táto stránka otvorí generátor flexboxu prednastavený na klasické rozloženie navigačnej lišty: zarovnať obsah nastavený na medzeru medzi a zarovnať položky na stred. Do prvého poľa vložte logo a do posledného riadok navigačných odkazov (alebo rozdeľte odkazy cez stredné polia) a kontajner flexbox ich posunie na opačné konce lišty, pričom každá položka zostane zoradená v rovnakom vertikálnom strede, bez ohľadu na to, aké vysoké je logo alebo text odkazu.

medzera medzi tým funguje: pripne prvého potomka k počiatočnému okraju a posledného potomka ku koncovému okraju a potom medzi ne rovnomerne rozmiestni všetky zostávajúce deti – presne ten tvar ľavého loga a pravého odkazu, ktorý používa takmer každá hlavička lokality. align-items: center potom rieši vertikálne zarovnanie, ktoré predtým potrebovalo hacky s výškou riadku alebo triky so zobrazením buniek tabuľky.

Upravte počet detí tak, aby zodpovedal vašej skutočnej navigačnej lište – dve políčka pre jednoduchý panel s logom a CTA, ďalšie pre logo plus niekoľko odkazov – a sledujte, ako sa rozloženie naživo prispôsobuje. Skopírujte blok CSS, keď sa zhoduje s vašou hlavičkou, alebo otvorte medzeru medzi predvoľbou, ak chcete vidieť, že jedna vlastnosť sa porovná s jej blízkymi príbuznými.

🛡️
Spustené v prehliadači

Vaše súbory a vstupy nikdy neopustia toto zariadenie. Spracovanie prebieha úplne offline. 100% bezpečné.

Prijaté formáty a pravidlá

  • Ovládacie prvky kontajnera: flex-direction, justify-content, align-items, flex-wrap a zadávanie medzier v pixeloch, aplikované naživo na náhľad.
  • Štandardne tri farebne označené detské boxy (pridajte až osem, odstráňte dva), každá má svoje vlastné polia flex-grow, flex-shrink a flex-base.
  • Kopírovateľný blok CSS s pravidlom .flex-container plus jedno pravidlo .flex-item-N na dieťa, ktoré má iné ako predvolené vlastnosti flex.

Hlavné výhody

✓ Každý ovládací prvok kontajnera a každý detský flex-grow, flex-shrink a flex-base aktualizuje tri očíslované ukážkové boxy naživo, takže presne uvidíte, čo robia vaše pravidlá flexboxu predtým, než sa dotknete šablóny so štýlmi.
✓ Generátor vytlačí iba podriadené pravidlá, ktoré sa v skutočnosti líšia od predvolených nastavení CSS, takže skopírovaný kód zostane krátky a čitateľný namiesto toho, aby na každom poli znova uvádzal flex-grow: 0.
✓ Prednastavené stránky riešia rozloženia, ktoré ľudia hľadajú podľa názvu: vycentrovanie divu, logo-ľavé odkazy-pravá navigačná lišta a flexibilné stĺpce rovnakej šírky – otvorte jeden a nástroj je už nakonfigurovaný.

Prípady použitia

  • • Získajte presný CSS na vycentrovanie divu horizontálne aj vertikálne sledovaním fungovania justify-content a align-items na živých náhľadových poliach.
  • • Vytvorte rozloženie navigačného panela s logom vľavo, odkazy vpravo s medzerou medzi položkami a položkami zarovnania: na stred a potom skopírujte kontajner CSS priamo do komponentu hlavičky.
  • • Porovnajte priestor medzi, priestor okolo a priestor rovnomerne vedľa seba na rovnakých troch poliach namiesto toho, aby ste hádali, ktoré z nich zodpovedá požadovanému rozstupu.