Handleiding: CSS Speeltuin Gebruiken

Doel van deze Applicatie

Deze speeltuin laat u experimenteren met CSS Flexbox en Grid layout eigenschappen. Pas de instellingen aan in het controlepaneel en zie direct het resultaat in het voorbeeldgebied. De gegenereerde CSS code kunt u kopiëren voor gebruik in uw eigen projecten.

Stap 1: Modus Kiezen
  1. Gebruik de tabs bovenaan ("Flexbox" / "Grid") om te wisselen tussen de layout modi.
  2. Het controlepaneel en de standaardinstellingen passen zich aan de gekozen modus aan.
Stap 2: Container Aanpassen
  1. Gebruik de opties onder "Container Eigenschappen" in het linker paneel.
  2. Selecteer waarden voor eigenschappen zoals `flex-direction`, `justify-content` (Flexbox) of `grid-template-columns`, `gap` (Grid).
  3. De wijzigingen worden direct zichtbaar in het rechter voorbeeldgebied.
Stap 3: Items Aanpassen
  1. Klik op een item (gekleurd blok) in het rechter voorbeeldgebied om het te selecteren. Het geselecteerde item krijgt een oranje rand.
  2. Pas de eigenschappen voor dit specifieke item aan onder "Item Eigenschappen" (wordt actief na selectie).
  3. Voorbeelden: `order`, `flex-grow` (Flexbox) of `grid-column`, `align-self` (Grid).
  4. Gebruik "Voeg Item Toe" / "Verwijder Item" om het aantal items te beheren.
Stap 4: Code Genereren & Kopiëren
  1. Terwijl u eigenschappen aanpast, wordt de bijbehorende CSS code automatisch bijgewerkt in het "Gegenereerde CSS" vak.
  2. De code bevat regels voor zowel de container (`#playgroundContainer`) als voor de individuele items.
  3. Klik op de "Kopieer Code" knop om de CSS naar uw klembord te kopiëren.

Belangrijke Aandachtspunten

  • Real-time: Alle wijzigingen worden direct toegepast.
  • Item Selectie: U moet een item selecteren voordat u item-specifieke eigenschappen kunt aanpassen.
  • CSS Waarden: Voer geldige CSS waarden in (bv. `1fr 1fr`, `10px`, `auto`). Ongeldige waarden worden mogelijk genegeerd door de browser.
  • Complexiteit: Deze speeltuin bevat de meest gangbare eigenschappen. Voor zeer geavanceerde layouts is mogelijk aanvullende CSS nodig.
Experimenteer met verschillende combinaties van container- en item-eigenschappen om de kracht van Flexbox en Grid te ontdekken!

Container Eigenschappen (Flex)

Werkt alleen als er meerdere regels zijn (flex-wrap: wrap).

Item Eigenschappen (Flex)

Selecteer een item in het voorbeeld

Gegenereerde CSS (Flexbox)

/* Code wordt hier gegenereerd */

Container Eigenschappen (Grid)

Verdeelt ruimte binnen de grid container als de grid kleiner is dan de container.
Verdeelt ruimte binnen de grid container als de grid kleiner is dan de container.

Item Eigenschappen (Grid)

Selecteer een item in het voorbeeld

Gegenereerde CSS (Grid)

/* Code wordt hier gegenereerd */
Home