⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

justify-content: space-between Explained (CSS)

Bygg en CSS flexbox-layout visuelt: flex-direction, justify-content, align-items, flex-wrap og gap på containeren, pluss per-child flex-grow, flex-shrink og flex-basis, alt med en live forhåndsvisning og kopierbar CSS.

Behandler... 0%

Resultat

Denne siden åpner generatoren med justify-content satt til mellomrom-mellom: den første boksen ligger i flukt mot beholderens startkant, den siste boksen ligger i flukt med endekanten, og restplassen er delt inn i like mellomrom mellom boksene i midten - aldri før den første eller etter den siste.

Det er detaljene folk blander sammen. space-around gir hver boks lik margin på begge sidene, slik at gapene mellom boksene ender opp dobbelt så brede som gapene ved de to ytterkantene (hver kant får bare én boks margin, ikke to). space-jevnt går lenger og gjør hvert gap samme størrelse, inkludert de to ytre kantene - den eneste av de tre hvor avstanden ser helt jevn ut hele veien.

Bytt rullegardinmenyen for rettferdig innhold mellom de tre verdiene nedenfor og se de samme tre boksene omorganisere – det er den raskeste måten å se forskjellen på i stedet for å huske den. Kopier CSS for den som samsvarer med avstanden du faktisk ønsker.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Beholderkontroller: flex-direction, justify-content, align-items, flex-wrap og en gap-inngang i piksler, brukt live på forhåndsvisningen.
  • Tre fargekodede barnebokser som standard (legg til opptil åtte, fjern ned til to), hver med sine egne felt for flex-grow, flex-shrink og flex-basis.
  • Kopierbar CSS-blokk med en .flex-container-regel pluss én .flex-item-N-regel per barn som har ikke-standard flex-egenskaper.

Viktige fordeler

✓ Hver beholderkontroll og hvert barns flex-grow, flex-shrink og flex-basis oppdaterer tre nummererte forhåndsvisningsbokser live, slik at du ser nøyaktig hva flexbox-reglene dine gjør før du berører et stilark.
✓ Generatoren skriver bare ut underordnede regler som faktisk avviker fra CSS-standardene, så den kopierte koden forblir kort og lesbar i stedet for å gjenta flex-grow: 0 på hver boks.
✓ Forhåndsinnstilte sider løser oppsettene folk søker etter ved navn: sentrering av en div, en logo-venstre lenker-høyre navigasjonslinje og fleksible kolonner med lik bredde – åpne en og verktøyet er allerede konfigurert.

Brukssaker

  • • Få den nøyaktige CSS-en for å sentrere en div både horisontalt og vertikalt ved å se justify-content og align-elementer arbeide på live forhåndsvisningsbokser.
  • • Bygg en logo-venstre, lenker-høyre navigasjonslinje-layout med mellomrom-mellom og juster-elementer: senter, og kopier deretter beholderens CSS rett inn i overskriftskomponenten.
  • • Sammenlign mellomrom, mellomrom rundt og jevnt mellomrom side om side på de samme tre boksene i stedet for å gjette hvilken som samsvarer med avstanden du ønsker.