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

CSS Flexbox generátor

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

A flexbox layout has two separate rulebooks — properties on the container (flex-direction, justify-content, align-items, flex-wrap, gap) and properties on each child (flex-grow, flex-shrink, flex-basis) — and mixing them up is the most common source of "why isn't this centering / growing / wrapping the way I expect" bugs. Tento generátor umístí na obrazovku obě knihy pravidel najednou: změňte jakýkoli ovládací prvek kontejneru nebo pole vlastního dítěte a tři očíslovaná, barevně odlišená pole se okamžitě aktualizují, takže příčina a následek zůstanou viditelné.

Strana kontejneru pokrývá každou osu rozvržení: vyberte směr, zvolte, jak jsou děti rozmístěny podél hlavní osy s obsahem zarovnání, zarovnejte je na příčnou osu, rozhodněte, zda se zalomí do nových řádků, a místo mezer mezi nimi nastavte mezeru. Podřízená strana je stejně skutečná: přidejte rámečky až do osmi, odeberte až dva a každému z nich přidělte vlastní flex-grow, flex-shrink a flex-base – generátor vytiskne pravidlo CSS pro dítě pouze tehdy, když se alespoň jedno z nich liší od výchozího nastavení prohlížeče, takže zkopírovaný kód se nikdy nevyplní pomocí flex-grow: 0 na krabicích, které to nepotřebují.

Přednastavené stránky přeskakují přímo na rozvržení, která lidé skutečně hledají podle názvu: jak vycentrovat div (jediná nejčastěji kladená otázka rozvržení CSS, vyřešená s justify-content a align-items oba nastavené na střed), logo-levý odkazy-pravá navigační lišta, flexibilní sloupce o stejné šířce přes flex-grow a vedle sebe srovnání mezery mezi mezerami a jejich relativní blízkostí.

Jako každý nástroj na tomto webu je generátor zdarma a běží výhradně ve vašem prohlížeči: žádné nahrávání, žádný účet a po načtení stránky funguje offline.

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