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

justify-content: razmak između objašnjenja (CSS)

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 justify-content postavljenim na space-between: prvi okvir nalazi se u ravnini s početnim rubom spremnika, posljednji okvir nalazi se u ravnini s njegovim krajnjim rubom, a preostali prostor podijeljen je na jednake razmake između okvira u sredini — nikada prije prvog ili nakon posljednjeg.

To je detalj koji ljudi miješaju. space-around daje svakoj kutiji jednaku marginu s obje strane, tako da su praznine između kutija dvostruko veće od praznina na dva vanjska ruba (svaki rub dobiva samo jednu marginu kutije, ne dvije). space-evenly ide dalje i čini svaki razmak iste veličine, uključujući dva vanjska ruba — jedini od tri gdje razmak izgleda savršeno ujednačen cijelim putem.

Prebacite padajući izbornik za opravdavanje sadržaja između tri vrijednosti u nastavku i gledajte kako se ista tri okvira preuređuju — to je najbrži način da vidite razliku umjesto da je pamtite. Kopirajte CSS za onaj koji odgovara razmaku koji zapravo želite.

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