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

CSS Flexbox Navbar — Logo vlevo, odkazy vpravo

Vizuálně sestavte rozvržení flexboxu CSS: flex-direction, justify-content, align-items, flex-wrap and gap na kontejneru, plus flex-grow, flex-shrink a flex-base na dítě, to vše s živým náhledem a kopírovatelným CSS.

Zpracování... 0%

Výsledek

Tato stránka otevře přednastavený generátor flexboxu na klasické rozvržení navigační lišty: justify-content set to space-between a align-items set to center. Vložte logo do prvního pole a řadu navigačních odkazů do posledního (nebo rozdělte odkazy přes prostřední rámečky) a kontejner flexboxu je posune na opačné konce lišty, přičemž všechny položky budou zarovnány ve stejném vertikálním středu, bez ohledu na to, jak vysoké je logo nebo text odkazu.

mezera mezi tím funguje: připne prvního potomka k počátečnímu okraji a posledního potomka ke koncovému okraji a poté mezi ně rovnoměrně rozmístí zbývající potomky – přesně ten tvar levého loga a pravého odkazu, který používá téměř každé záhlaví webu. align-items: center pak řeší vertikální zarovnání, které dříve vyžadovalo hacky s výškou řádku nebo triky se zobrazením tabulky.

Upravte počet dětí tak, aby odpovídal vašemu skutečnému navigačnímu panelu – dvě pole pro holý pruh s logem a CTA, další pro logo a několik odkazů – a sledujte, jak se rozvržení živě přizpůsobuje. Zkopírujte blok CSS, jakmile bude odpovídat vaší hlavičce, nebo otevřete mezeru mezi předvolbou, pokud chcete vidět, že jedna vlastnost porovnává s jejími blízkými příbuznými.

🛡️
Spuštěno v prohlížeči

Vaše soubory a vstupy nikdy neopustí toto zařízení. Zpracování probíhá zcela offline. 100% bezpečné.

Přijaté formáty a pravidla

  • Ovládací prvky kontejneru: flex-direction, justify-content, align-items, flex-wrap a zadávání mezery v pixelech, aplikované živě na náhled.
  • Ve výchozím nastavení tři barevně odlišené dětské boxy (přidat až osm, odebrat až dva), každý s vlastními poli flex-grow, flex-shrink a flex-base.
  • Kopírovatelný blok CSS s pravidlem .flex-container plus jedním pravidlem .flex-item-N na dítě, které má jiné než výchozí vlastnosti flex.

Hlavní výhody

✓ Každý ovládací prvek kontejneru a každý dětský flex-grow, flex-shrink a flex-base aktualizuje naživo tři očíslovaná náhledová pole, takže přesně uvidíte, co vaše pravidla flexboxu dělají, než se dotknete šablony stylů.
✓ Generátor vytiskne pouze podřízená pravidla, která se ve skutečnosti liší od výchozích hodnot CSS, takže zkopírovaný kód zůstane krátký a čitelný místo toho, aby na každém poli znovu uváděl flex-grow: 0.
✓ Přednastavené stránky řeší rozvržení, která lidé hledají podle jména: vycentrování divu, logo-levé odkazy-pravá navigační lišta a flexibilní sloupce stejné šířky – otevřete jeden a nástroj je již nakonfigurován.

Případy použití

  • • Získejte přesný CSS pro vycentrování prvku div vodorovně i svisle tím, že budete sledovat, jak položky justify-content a align-items fungují na polích živého náhledu.
  • • Vytvořte rozložení navigační lišty vlevo s logem, vpravo s odkazy s mezerou mezi položkami a položkami zarovnání: na střed a poté zkopírujte kontejner CSS přímo do komponenty záhlaví.
  • • Porovnejte prostor mezi, prostorem a prostorem rovnoměrně vedle sebe na stejných třech polích, místo abyste hádali, která z nich odpovídá požadovanému rozestupu.