⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

justify-content: space-between Explained (CSS)

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

Behandler... 0%

Resultat

Denne side åbner generatoren med justify-content sat til space-between: den første boks ligger flush mod containerens startkant, den sidste boks sidder flush mod dens endekant, og den resterende plads er opdelt i lige store mellemrum mellem boksene i midten - aldrig før den første eller efter den sidste.

Det er den detalje, folk blander sammen. space-around giver hver kasse en lige stor margin på begge dens sider, så mellemrummene mellem kasserne ender dobbelt så brede som mellemrummene ved de to ydre kanter (hver kant får kun én kasses margin, ikke to). space-evenly går længere og gør hvert mellemrum til samme størrelse, inklusive de to ydre kanter - den eneste af de tre, hvor afstanden ser perfekt ensartet ud hele vejen på tværs.

Skift rullemenuen Justify-content mellem de tre værdier nedenfor, og se de samme tre kasser omarrangere - det er den hurtigste måde at se forskellen på i stedet for at huske den. Kopier CSS'en for den, der matcher den mellemrum, du rent faktisk ønsker.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Beholderkontroller: flex-direction, justify-content, align-items, flex-wrap og en gap-input i pixels, anvendt live på forhåndsvisningen.
  • Tre farvekodede underordnede bokse som standard (tilføj op til otte, fjern ned til to), hver med sine egne flex-grow, flex-shrink og flex-basis felter.
  • Kopierbar CSS-blok med en .flex-container-regel plus én .flex-item-N-regel pr. barn, der har ikke-standard flex-egenskaber.

Vigtige fordele

✓ Hver containerkontrol og ethvert barns flex-grow, flex-shrink og flex-basis opdaterer tre nummererede forhåndsvisningsbokse live, så du kan se præcis, hvad dine flexbox-regler gør, før du trykker på et stylesheet.
✓ Generatoren udskriver kun underordnede regler, der faktisk afviger fra CSS-standarderne, så den kopierede kode forbliver kort og læsbar i stedet for at gentage flex-grow: 0 på hver boks.
✓ Forudindstillede sider løser de layouts, folk søger efter ved navn: centrering af en div, en logo-venstre links-højre navigeringslinje og fleksible kolonner i samme bredde - åbn en, og værktøjet er allerede konfigureret.

Brug Cases

  • • Få den nøjagtige CSS til at centrere en div både vandret og lodret ved at se justify-content og align-items arbejde på live forhåndsvisningsbokse.
  • • Byg et logo-venstre, links-højre navbar-layout med mellemrum-mellem og align-elementer: centreret, og kopier derefter container-CSS direkte ind i din header-komponent.
  • • Sammenlign mellemrum-mellem, mellemrum-omkring og mellemrum-jævnt side om side på de samme tre kasser i stedet for at gætte, hvilken der matcher den mellemrum, du ønsker.