⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

justify-content: space-between Explained (CSS)

Bygg en CSS-flexbox-layout visuellt: flex-direction, justify-content, align-items, flex-wrap och gap på behållaren, plus per-child flex-grow, flex-shrink och flex-bas, allt med en liveförhandsvisning och kopierbar CSS.

Bearbetar... 0%

Resultat

Den här sidan öppnar generatorn med justify-content inställt på space-between: den första lådan ligger i linje med behållarens startkant, den sista lådan ligger i linje med dess ändkant, och det överblivna utrymmet är uppdelat i lika mellanrum mellan rutorna i mitten - aldrig före den första eller efter den sista.

Det är den detalj folk blandar ihop. space-around ger varje ruta lika marginal på båda sina sidor, så mellanrummen mellan lådorna hamnar dubbelt så breda som mellanrummen vid de två ytterkanterna (varje kant får bara en rutas marginal, inte två). space-evenly går längre och gör att varje mellanrum blir lika stort, inklusive de två yttre kanterna - den enda av de tre där avståndet ser perfekt enhetligt ut hela vägen.

Växla rullgardinsmenyn för motivera innehåll mellan de tre värdena nedan och se samma tre rutor arrangera om – det är det snabbaste sättet att se skillnaden istället för att memorera den. Kopiera CSS för den som matchar avståndet du faktiskt vill ha.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Behållarkontroller: flex-direction, justify-content, align-items, flex-wrap och en luckinmatning i pixlar, tillämpas live på förhandsgranskningen.
  • Tre färgkodade underordnade rutor som standard (lägg till upp till åtta, ta bort ner till två), var och en med sina egna flex-grow, flex-shrink och flex-bas.
  • Kopierbart CSS-block med en .flex-container-regel plus en .flex-item-N-regel per barn som har flexegenskaper som inte är standard.

Viktiga fördelar

✓ Varje containerkontroll och varje barns flex-grow, flex-shrink och flex-bas uppdaterar tre numrerade förhandsgranskningsrutor live, så att du ser exakt vad dina flexbox-regler gör innan du rör en stilmall.
✓ Generatorn skriver bara ut underordnade regler som faktiskt skiljer sig från CSS-standarderna, så den kopierade koden förblir kort och läsbar istället för att återställa flex-grow: 0 på varje ruta.
✓ Förinställda sidor löser layouterna som folk söker efter med namn: centrera en div, en logotyp-vänster länkar-höger navigeringsfält och lika breda flexibla kolumner – öppna en och verktyget är redan konfigurerat.

Användningsfall

  • • Skaffa exakt CSS för att centrera en div både horisontellt och vertikalt genom att se justify-content och align-items arbeta i liveförhandsgranskningsrutor.
  • • Bygg en logotyp-vänster, länk-höger navigeringsfältslayout med mellanslag-mellan och align-objekt: centrera, kopiera sedan behållarens CSS direkt in i din rubrikkomponent.
  • • Jämför mellanrum-mellan, mellanrum runt och mellanrum-jämnt sida vid sida på samma tre rutor istället för att gissa vilken som matchar avståndet du vill ha.