CSS Flexbox-oefenomgeving
Interactieve oefenomgeving om Flexbox-indelingen te leren en te genereren
Lay-outinstellingen
Vooraf ingestelde lay-outs
Overschrijvingen per item
Selecteer een item in het voorbeeld of de lijst om de eigenschappen ervan te bewerken.
Snelle Flexbox-referentie
Hoofdas
justify-content bepaalt de uitlijning langs de hoofdas (bepaald door flex-direction).
Kruisas
align-items bepaalt de uitlijning langs de kruisas (loodrecht op flex-direction).
Meerdere regels
align-content geldt alleen als flex-wrap op wrap of wrap-reverse staat met meerdere regels.
Live voorbeeld
Gegenereerde CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}Wijzig de instellingen of selecteer een item. Het voorbeeld en de CSS worden samen bijgewerkt.
Over CSS Flexbox-oefenomgeving
De CSS Flexbox-oefenomgeving is een visuele, interactieve tool om CSS Flexbox-lay-outs te leren en mee te experimenteren. Flexbox (Flexible Box Layout) is een van de krachtigste en meest gebruikte CSS-lay-outmodules, bedoeld om items in een container flexibel en responsief te rangschikken. Met deze tool past u elke eigenschap van de flex-container en van flex-items in realtime aan en ziet u precies hoe uw lay-out verandert.
Belangrijkste functies
- Volledige controle over alle eigenschappen van de flex-container: flex-direction, flex-wrap, justify-content, align-items, align-content en gap
- Overschrijvingen per item: order, flex-grow, flex-shrink, flex-basis en align-self
- Live visueel voorbeeld met gekleurde, genummerde items en een gestippelde containerrand
- Voorinstellingen voor lay-outs, waaronder Navigatiebalk, Kaartenraster, Holy Grail, Gecentreerde inhoud en Zijbalklay-out
- Automatisch gegenereerde CSS-code met kopiëren met één klik
- Dynamisch aantal items, instelbaar van 1 tot 12 items
- Items aanklikken om hun eigenschappen per item te bewerken
- Ondersteuning voor donkere modus voor prettig gebruik bij elke lichtsterkte
Flexbox-eigenschappen begrijpen
Flexbox werkt langs twee assen: de hoofdas (bepaald door flex-direction) en de kruisas (loodrecht op de hoofdas). De eigenschap justify-content verdeelt ruimte langs de hoofdas, terwijl align-items de uitlijning op de kruisas regelt. Als flex-wrap afbreken over meerdere regels toestaat, bepaalt align-content de ruimte tussen die regels. Elk flex-item kan zijn uitlijning overschrijven met align-self, de verhoudingen voor groeien en krimpen bepalen en met flex-basis een basisgrootte instellen.
Veelgebruikte Flexbox-lay-outpatronen
Flexbox is erg geschikt voor het bouwen van navigatiebalken, het horizontaal en verticaal centreren van inhoud, kaartenrasters die responsief afbreken, zijbalklay-outs met een vaste zijbalk en vloeiende hoofdinhoud, en het klassieke Holy Grail-lay-out met header, footer, zijbalk en hoofdinhoud. Met de voorinstellingsknoppen ziet u deze patronen direct in actie.
Voor wie is deze tool?
- Webontwikkelaars die voor het eerst CSS Flexbox leren
- Frontend-engineers die snel responsieve lay-outs prototypen
- UI/UX-ontwerpers die flex-lay-outs willen visualiseren voordat ze code schrijven
- Studenten die CSS-lay-outtechnieken bestuderen voor hun opleiding of sollicitatiegesprekken
- Docenten die Flexbox-concepten uitleggen in workshops of klaslokalen
- Iedereen die snel Flexbox-CSS voor zijn of haar projecten wil genereren