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

justify-content: space-between Explained (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 z poravnano vsebino, nastavljeno na presledek med: prvo polje je poravnano z začetnim robom vsebnika, zadnje polje je poravnano s končnim robom, preostali prostor pa je razdeljen na enake vrzeli med polji na sredini — nikoli pred prvim ali za zadnjim.

To so podrobnosti, ki jih ljudje mešajo. space-around daje vsaki škatli enak rob na obeh straneh, tako da so vrzeli med škatlami dvakrat širše kot vrzeli na obeh zunanjih robovih (vsak rob dobi le en rob škatle, ne dveh). space-even gre še dlje in poskrbi, da je vsaka vrzel enake velikosti, vključno z dvema zunanjima robovoma – edina od treh, kjer je razmik videti popolnoma enakomeren po vsej širini.

Preklopite spustni meni za poravnavo vsebine med tremi spodnjimi vrednostmi in opazujte, kako se ista tri polja preurejajo – to je najhitrejši način, da vidite razliko, namesto da si jo zapomnite. Kopirajte CSS za tistega, ki se ujema z razmikom, ki ga dejansko želite.

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