Zet justify-content op space-between en align-items op center. De CSS bevat display: flex;, justify-content: space-between; en align-items: center;: het eerste en laatste item raken de randen en alle items staan verticaal gecentreerd in de rij.
Goed om te weten
justify-content werkt langs de hoofdas en align-items dwars daarop, dus met flex-direction: column wisselen ze om en wordt justify-content verticaal. Gebruik grid als items zowel in rijen als in kolommen moeten uitlijnen.
Over deze tool
De CSS Flexbox Playground is een interactieve editor voor de belangrijkste lay-out-eigenschappen van een flex-container. Kies waarden voor flex-direction, justify-content, align-items en flex-wrap uit vier dropdownmenu's, en een preview van vijf genummerde vakken herschikt zich direct, zodat je kunt zien hoe elke eigenschap de lay-out vormgeeft voordat je code schrijft.
Onder de preview wordt de bijbehorende .container-regel gegenereerd terwijl je werkt: display: flex gevolgd door de vier declaraties die je hebt gekozen. Eén knop kopieert het hele blok naar je klembord, klaar om in een stylesheet te plakken. Alleen deze container-niveau-eigenschappen worden blootgesteld; per-item-instellingen zoals flex-grow, order of align-self worden niet behandeld.
Alles draait in je browser. Er wordt niets geüpload, er zijn geen accounts of tracking, en het werkt offline. Het is een snelle manier om flexbox-intuïtie op te bouwen of om een startregel te maken die je vervolgens handmatig verfijnt.
Veelgestelde vragen
Wat toont de preview?
Een flex-container met vijf genummerde vakken die zich live herschikken terwijl je flex-direction, justify-content, align-items of flex-wrap wijzigt.
Is de gegenereerde CSS klaar voor gebruik?
Ja. Kopieer de gegenereerde .container-regel rechtstreeks in je stylesheet; deze bevat display: flex plus de vier eigenschappen die je hebt geselecteerd.
Welke flexbox-eigenschappen kan ik aanpassen?
Vier dropdownmenu's regelen flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) en flex-wrap (nowrap, wrap, wrap-reverse).
Bevat de uitvoer gap of per-item-flex-instellingen?
Nee. De gekopieerde regel bevat alleen display: flex en de vier container-eigenschappen. De 8px-gap in de preview is er alleen voor de spatiëring, en item-niveau-eigenschappen zoals flex-grow, order of align-self zijn niet inbegrepen.