⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

Flexbox stupci jednake širine — CSS generator

Izgradite CSS flexbox raspored vizualno: flex-direction, justify-content, align-items, flex-wrap i gap na spremniku, plus flex-grow, flex-shrink i flex-basis po djetetu, sve s pregledom uživo i CSS-om koji se može kopirati.

Obrada... 0%

Rezultat

Ova stranica otvara generator s flex-grow: 1 koji je već postavljen na sva tri okvira za pregled. Gledajte ih: umjesto da se skupljaju kako bi odgovarali njihovom sadržaju, svaki okvir zauzima identičan udio preostalog prostora u retku, što je cijeli recept za fleksibilne stupce jednake širine — bez postotnih širina, bez calc(), bez fiksne matematike piksela za održavanje sinkronizacije.

flex-grow: 1 govori djetetu da raste, a postavljanje na svako dijete u redu znači da sva rastu jednako, tako da na kraju imaju istu širinu bez obzira na to koliko ih ima ili kakav se sadržaj nalazi u njima. Dodajte ili uklonite okvir s kontrolama u nastavku i preostali se stupci trenutačno redistribuiraju kako bi ostali jednaki — promijenite veličinu prozora preglednika preko ovog izgleda u produkciji i ponašat će se na isti način.

Ovo je uzorak iza rešetki kartica jednake visine, stupaca tablice s cijenama i ravnomjerno podijeljenih dijelova podnožja. Dajte jednom stupcu više prostora tako što ćete podići njegov flex-grow iznad ostalih ili kopirajte CSS blok ispod točno onako kako je generiran za čistu jednaku podjelu.

🛡️
Izvršeno u pregledniku

Vaše datoteke i unosi nikada ne napuštaju ovaj uređaj. Obrada se odvija potpuno offline. 100% siguran.

Prihvaćeni formati i pravila

  • Kontrole spremnika: flex-direction, justify-content, align-items, flex-wrap i unos razmaka u pikselima, primijenjen uživo na pregled.
  • Tri podređena okvira označena bojama prema zadanim postavkama (dodajte do osam, uklonite do dva), svaki sa svojim vlastitim poljima flex-grow, flex-shrink i flex-basis.
  • CSS blok koji se može kopirati s pravilom .flex-container plus jednim pravilom .flex-item-N po podređenom pravilu koje ima svojstva fleksibilnosti koja nisu zadana.

Ključne prednosti

✓ Svaka kontrola spremnika i flex-grow, flex-shrink i flex-basis svakog djeteta ažuriraju tri numerirana okvira za pregled uživo, tako da točno vidite što rade vaša pravila flexboxa prije nego što dodirnete tablicu stilova.
✓ Generator ispisuje samo podređena pravila koja se zapravo razlikuju od zadanih CSS postavki, tako da kopirani kod ostaje kratak i čitljiv umjesto ponovnog postavljanja flex-grow: 0 na svaki okvir.
✓ Unaprijed postavljene stranice rješavaju izglede koje ljudi traže prema nazivu: centriranje diva, logotip-lijeva veza-desna navigacijska traka i fleksibilni stupci jednake širine — otvorite jedan i alat je već konfiguriran.

Slučajevi upotrebe

  • • Nabavite točan CSS za centriranje diva vodoravno i okomito gledajući kako justify-content i align-items rade na okvirima za pregled uživo.
  • • Izradite izgled navigacijske trake s logotipom lijevo, veze desno s razmakom između i poravnanjem stavki: središte, a zatim kopirajte CSS spremnika ravno u svoju komponentu zaglavlja.
  • • Usporedite razmak između, razmak oko i ravnomjeran razmak jedan pored drugog na iste tri kutije umjesto da pogađate koja odgovara razmaku koji želite.