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

CSS Flexbox generátor

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

Rozloženie flexboxu má dve samostatné knihy pravidiel – vlastnosti na kontajneri (flex-direction, justify-content, align-items, flex-wrap, gap) a vlastnosti na každom dieťati (flex-grow, flex-shrink, flex-basis) – a ich zmiešanie je najbežnejším zdrojom „prečo to nie je centrovanie/rastanie/obalovanie tak, ako očakávam“. Tento generátor umiestni na obrazovku obe knihy pravidiel naraz: zmeňte ľubovoľný ovládací prvok kontajnera alebo polia ľubovoľného dieťaťa a tri očíslované, farebne odlíšené polia sa aktualizujú okamžite, takže príčina a následok zostanú viditeľné.

Strana kontajnera pokrýva každú os rozloženia: vyberte smer, vyberte, ako sú deti rozmiestnené pozdĺž hlavnej osi pomocou zarovnania obsahu, zarovnajte ich na krížovú os, rozhodnite sa, či sa zalomia do nových riadkov, a namiesto medzery medzi nimi nastavte medzeru. Podradená strana je rovnako skutočná: pridajte až osem políčok, odstráňte až dve a každému z nich dajte vlastný flex-grow, flex-shrink a flex-base – generátor vytlačí pravidlo CSS pre dieťa len vtedy, keď sa aspoň jedno z nich líši od predvoleného nastavenia prehliadača, takže skopírovaný kód sa nikdy nevyplní flex-grow: 0 na boxoch, ktoré to nepotrebujú.

Prednastavené stránky preskočia priamo na rozloženia, ktoré ľudia skutočne hľadajú podľa názvu: ako vycentrovať div (jediná najčastejšie kladená otázka rozloženia CSS, vyriešená pomocou zarovnania obsahu a zarovnania položiek na stred), logo-ľavé odkazy-pravá navigačná lišta, flexibilné stĺpce s rovnakou šírkou pomocou flex-grow a porovnanie medzier medzi medzerou a jej relatívne blízkou medzerou.

Ako každý nástroj na tejto stránke, generátor je bezplatný a beží výhradne vo vašom prehliadači: žiadne nahrávanie, žiadny účet a po načítaní stránky funguje offline.

🛡️
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.