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

Stĺpce Flexbox s rovnakou šírkou — generátor CSS

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 s flex-grow: 1, ktorý je už nastavený na všetkých troch náhľadových boxoch. Sledujte ich: namiesto toho, aby sa zmenšovali, aby sa zmestili na ich obsah, každý rámček si nárokuje rovnaký podiel zvyšného miesta v riadku, čo je celý recept na flexibilné stĺpce s rovnakou šírkou – žiadne percentuálne šírky, žiadne calc(), žiadna fixná pixelová matematika na synchronizáciu.

flex-grow: 1 hovorí dieťaťu, aby rástlo, a nastavenie na každé dieťa v rade znamená, že všetky rastú rovnako, takže skončia rovnako široké bez ohľadu na to, koľko ich je alebo aký obsah sa v nich nachádza. Pridajte alebo odstráňte rámček pomocou ovládacích prvkov nižšie a zostávajúce stĺpce sa okamžite prerozdelia, aby zostali rovnaké – zmeňte veľkosť okna prehliadača nad týmto rozložením v produkcii a správa sa rovnako.

Toto je vzor za mriežkami kariet s rovnakou výškou, stĺpcami cenovej tabuľky a rovnomerne rozdelenými sekciami päty. Dajte jednému stĺpcu viac miesta tým, že zdvihnete jeho flex-grow nad ostatné, alebo skopírujte blok CSS nižšie presne tak, ako bol vygenerovaný, aby ste dosiahli čisté a rovnomerné rozdelenie.

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