⭐ 0
🔍
Tekst Afbeelding PDF & Documenten Audio Muziek Elektronica Tijd Hulpprogramma's Validators Esoterie Spellen

rechtvaardigen-inhoud: ruimte tussen uitgelegd (CSS)

Bouw visueel een CSS-flexbox-indeling: flex-direction, justify-content, align-items, flex-wrap en gap op de container, plus flex-grow, flex-shrink en flex-basis per kind, allemaal met een live preview en kopieerbare CSS.

Verwerken... 0%

Resultaat

Deze pagina opent de generator met justify-content ingesteld op space-between: de eerste doos ligt vlak tegen de startrand van de container, de laatste doos ligt vlak tegen de eindrand en de overgebleven ruimte is verdeeld in gelijke ruimtes tussen de dozen in het midden - nooit vóór de eerste of na de laatste.

Dat zijn de details die mensen door elkaar halen. space-around geeft elke doos een gelijke marge aan beide zijden, zodat de openingen tussen de dozen twee keer zo breed worden als de openingen aan de twee buitenranden (elke rand krijgt slechts één doosmarge, niet twee). space-evenly gaat verder en maakt elke opening even groot, inclusief de twee buitenranden - de enige van de drie waar de afstand er helemaal uniform uitziet.

Schakel de vervolgkeuzelijst Justify-Content tussen de drie onderstaande waarden en zie hoe dezelfde drie vakken opnieuw worden gerangschikt. Dit is de snelste manier om het verschil te zien in plaats van het te onthouden. Kopieer de CSS voor degene die overeenkomt met de gewenste afstand.

🛡️
Uitgevoerd in browser

Uw bestanden en invoer verlaten dit apparaat nooit. Verwerking verloopt volledig offline. 100% veilig.

Geaccepteerde formaten & regels

  • Containerbedieningselementen: flex-direction, justify-content, align-items, flex-wrap en een gap-invoer in pixels, live toegepast op de preview.
  • Standaard drie kleurgecodeerde onderliggende vakken (optellen tot acht, verwijderen tot twee), elk met zijn eigen velden voor flex-grow, flex-shrink en flex-basis.
  • Kopieerbaar CSS-blok met een .flex-containerregel plus één .flex-item-N-regel per kind met niet-standaard flex-eigenschappen.

Belangrijkste voordelen

✓ Elke containercontrole en de flex-grow, flex-shrink en flex-basis van elk kind updaten drie genummerde voorbeeldvakken live, zodat u precies ziet wat uw flexbox-regels doen voordat u een stylesheet aanraakt.
✓ De generator drukt alleen onderliggende regels af die daadwerkelijk verschillen van de CSS-standaardwaarden, zodat de gekopieerde code kort en leesbaar blijft in plaats van dat flex-grow: 0 in elk vak wordt herhaald.
✓ Vooraf ingestelde pagina's lossen de lay-outs op waarnaar mensen op naam zoeken: een div centreren, een logo-links-rechts navigatiebalk en flexibele kolommen van gelijke breedte - open er één en de tool is al geconfigureerd.

Toepassingen

  • • Verkrijg de exacte CSS om een div zowel horizontaal als verticaal te centreren door te kijken hoe de justify-content en align-items werken in live preview-vakken.
  • • Bouw een navigatiebalkindeling met logo links en links rechts met ruimte tussen en uitlijnitems: centreren en kopieer vervolgens de container-CSS rechtstreeks naar uw headercomponent.
  • • Vergelijk de ruimte tussen, de ruimte eromheen en de ruimte gelijkmatig naast elkaar op dezelfde drie vakken, in plaats van te raden welke overeenkomt met de gewenste afstand.