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

Sloupce Flexbox se stejnou šířkou — generátor CSS

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 generátor s flex-grow: 1, který je již nastaven na všech třech oknech náhledu. Sledujte je: místo toho, aby se zmenšily tak, aby odpovídaly jejich obsahu, každý rámeček si nárokuje stejný podíl zbývajícího místa v řádku, což je celý recept na flexibilní sloupce o stejné šířce – žádné procentuální šířky, žádné calc(), žádná fixní pixelová matematika pro synchronizaci.

flex-grow: 1 říká dítěti, aby rostlo, a nastavení na každé dítě v řadě znamená, že všechna rostou o stejnou míru, takže nakonec budou mít stejnou šířku bez ohledu na to, kolik jich je nebo jaký obsah se v nich nachází. Přidejte nebo odeberte rámeček s ovládacími prvky níže a zbývající sloupce se okamžitě přerozdělí, aby zůstaly stejné – změňte velikost okna prohlížeče nad tímto rozložením v produkci a chová se stejně.

Toto je vzor za mřížkami karet se stejnou výškou, sloupci cenové tabulky a rovnoměrně rozdělenými sekcemi zápatí. Dejte jednomu sloupci více místa tím, že zvednete jeho flex-grow nad ostatní, nebo zkopírujte blok CSS níže přesně tak, jak byl vygenerován pro čisté rovné rozdělení.

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