⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Stolpci Flexbox enake širine — Generator CSS

Vizualno zgradite postavitev CSS flexbox: flex-direction, justify-content, align-items, flex-wrap in vrzel na vsebniku ter flex-grow, flex-shrink in flex-basis na otroka, vse s predogledom v živo in CSS-jem, ki ga je mogoče kopirati.

Obdelava ... 0%

Rezultat

Ta stran odpre generator s flex-grow: 1, ki je že nastavljen na vseh treh poljih za predogled. Opazujte jih: namesto da bi se skrčilo, da bi ustrezalo njihovi vsebini, vsako polje zahteva enak delež preostalega prostora v vrstici, kar je celoten recept za prilagodljive stolpce enake širine – brez odstotnih širin, brez calc(), brez fiksne matematike pikslov, ki bi bila sinhronizirana.

flex-grow: 1 sporoča otroku, naj raste, in nastavitev za vsakega otroka v vrsti pomeni, da vsi zrastejo za enako količino, tako da so na koncu enake širine, ne glede na to, koliko jih je ali kakšna vsebina je v njih. Dodajte ali odstranite polje s spodnjimi kontrolniki in preostali stolpci se takoj prerazporedijo, da ostanejo enaki – spremenite velikost okna brskalnika čez to postavitev v produkciji in obnaša se enako.

To je vzorec za enako visokimi mrežami kartic, stolpci tabele s cenami in enakomerno razdeljenimi deli noge. Dajte enemu stolpcu več prostora tako, da dvignete njegov flex-grow nad druge, ali kopirajte spodnji blok CSS točno tako, kot je ustvarjen za čisto enako razdelitev.

🛡️
Izvedeno v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka popolnoma brez povezave. 100 % varno.

Sprejeti formati in pravila

  • Kontrolniki vsebnika: flex-direction, justify-content, align-items, flex-wrap in vnos vrzeli v slikovnih pikah, uporabljen v živo za predogled.
  • Privzeto trije barvno kodirani podrejeni okvirji (dodajte do osem, odstranite do dva), vsako s svojimi polji flex-grow, flex-shrink in flex-basis.
  • Blok CSS, ki ga je mogoče kopirati, s pravilom .flex-container in enim pravilom .flex-item-N na podrejenega elementa, ki ima lastnosti flex, ki niso privzete.

Ključne prednosti

✓ Vsak kontrolnik vsebnika in flex-grow, flex-shrink in flex-basis vsakega otroka posodabljajo tri oštevilčena polja za predogled v živo, tako da natančno vidite, kaj počnejo vaša pravila flexboxa, preden se dotaknete tabele slogov.
✓ Generator natisne le podrejena pravila, ki se dejansko razlikujejo od privzetih nastavitev CSS, tako da ostane kopirana koda kratka in berljiva, namesto da bi ponovno navedel flex-grow: 0 na vsakem polju.
✓ Prednastavljene strani rešujejo postavitve, ki jih ljudje iščejo po imenu: centriranje diva, logotip-leve povezave-desna vrstica za krmarjenje in prilagodljivi stolpci enake širine – odprite eno in orodje je že konfigurirano.

Primeri uporabe

  • • Pridobite natančen CSS za centriranje div tako vodoravno kot navpično, tako da opazujete delo poravnave vsebine in poravnave elementov na poljih za predogled v živo.
  • • Zgradite postavitev vrstice za krmarjenje z logotipom levo in povezavo desno s presledkom med in align-items: center, nato kopirajte CSS vsebnika naravnost v komponento glave.
  • • Primerjajte razmik med, razmik okoli in enakomerno razmik enega poleg drugega na istih treh poljih, namesto da ugibate, kateri se ujema z želenim razmikom.