Flexbox-generator
Stel de eigenschappen in en lees in gewoon Nederlands wat ze echt doen.
- Draait in je browser — je tekst wordt nergens naartoe gestuurd
- Geen aanmelding, geen quota, gratis te gebruiken zo vaak je wilt
Hoe het werkt
Flexbox is niet ingewikkeld, maar één ding eraan verrast bijna iedereen: justify-content en align-items betekenen niet horizontaal en verticaal. Ze betekenen langs de richting en dwars erop, en de richting stel je zelf in.
De valkuil, rechtstreeks gezegd
Bij flex-direction: row werkt justify-content horizontaal en align-items verticaal. Schakel over naar column en ze wisselen volledig om. Elk uur dat aan flexbox verloren gaat, komt in wezen hierop neer. De uitleg eronder wordt bijgewerkt terwijl je de richting wijzigt, zodat het verband zichtbaar is in plaats van uit het hoofd geleerd.
Hoofdas en dwarsas
De hoofdas is de as waarlangs items stromen, ingesteld door flex-direction. De dwarsas staat er loodrecht op. justify-content verdeelt ruimte langs de hoofdas; align-items positioneert items op de dwarsas. Zodra die twee namen blijven hangen, volgt de rest vanzelf.
gap, en waarom het marges verving
gap plaatst ruimte tussen items zonder die buiten het eerste en laatste toe te voegen, precies wat marges verkeerd doen en wat mensen vroeger oplosten met :last-child-trucs. Het wordt in elke huidige browser ondersteund en er is geen reden meer om het te mijden.
nowrap betekent krimpen, niet overlopen
De standaard is nowrap, en items krimpen onder hun natuurlijke formaat om te passen in plaats van naar een nieuwe regel te gaan. Daarom wordt tekst soms onverwacht samengeperst in een flexrij. Met wrap kunnen items in plaats daarvan omlaag verschuiven; min-width: 0 op een kindelement voorkomt dat het verder krimpt dan zijn inhoud.
In beide richtingen centreren
justify-content: center met align-items: center centreert een item in beide richtingen, ongeacht flex-direction, en dat is de ene combinatie die het waard is om rechtstreeks te onthouden.
Flexbox-generator — vragen
Waarom verplaatst align-items dingen horizontaal?
Omdat flex-direction column is. De twee eigenschappen volgen de richting, niet het scherm.
Wat is het verschil tussen de hoofdas en de dwarsas?
De hoofdas is de richting waarin items stromen, ingesteld door flex-direction. De dwarsas staat daar loodrecht op.
Hoe centreer ik iets in beide richtingen?
justify-content: center samen met align-items: center.
Waarom is mijn tekst samengeperst?
De standaard nowrap laat items krimpen om te passen. Stel flex-wrap: wrap in, of min-width: 0 op het kindelement.
Kan ik gap met flexbox gebruiken?
Ja, in elke huidige browser. Het is beter dan marges omdat het geen ruimte aan de uiteinden toevoegt.