CSS Flexbox-generator

Een flexbox-indeling heeft twee afzonderlijke regelboeken - eigenschappen voor de container (flex-direction, justify-content, align-items, flex-wrap, gap) en eigenschappen voor elk kind (flex-grow, flex-shrink, flex-basis) - en het door elkaar halen ervan is de meest voorkomende bron van "waarom is dit centreren / groeien / inpakken niet zoals ik verwacht" -bugs. Deze generator zet beide spelregels tegelijk op het scherm: wijzig elk containerbesturingselement of de eigen velden van een kind en drie genummerde, kleurgecodeerde vakjes worden onmiddellijk bijgewerkt, zodat oorzaak en gevolg zichtbaar blijven.

De containerzijde bedekt elke layout-as: kies een richting, kies hoe kinderen langs de hoofdas worden verdeeld met justify-content, lijn ze uit op de dwarsas, beslis of ze op nieuwe regels doorlopen en stel een opening in in plaats van marge-hacks ertussen. De onderliggende kant is net zo reëel: voeg maximaal acht vakjes toe, verwijder er twee, en geef elk van hen hun eigen flex-grow, flex-shrink en flex-basis. De generator drukt alleen een CSS-regel per kind af als ten minste één daarvan afwijkt van de browserstandaard, zodat de gekopieerde code zichzelf nooit opvult met flex-grow: 0 voor vakken die deze niet nodig hebben.

Vooraf ingestelde pagina's gaan rechtstreeks naar de lay-outs waar mensen daadwerkelijk op naam naar zoeken: hoe je een div kunt centreren (de meest gestelde CSS-lay-outvraag, opgelost met justify-content en align-items beide ingesteld op centreren), een logo-links-links-rechts navigatiebalk, flexibele kolommen van gelijke breedte via flex-grow, en een zij-aan-zij vergelijking van space-between met zijn naaste verwanten space-around en space-evenly.

Zoals elke tool op deze site is de generator gratis en draait hij volledig in uw browser: geen upload, geen account, en hij blijft offline werken zodra de pagina is geladen.