Flexbox-generator

Sett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.

Forhåndsinnstillinger
Container
Retning (direction)
Bryting (wrap)
Justify content
Align items
Elementer
Element 1
Align self
CSS
Juster containeren og elementene for å forme layouten din.

Layouten din bygges direkte i nettleseren din. Ingenting du angir her lastes opp til BroBroGo.

Ofte stilte spørsmål

Hva er forskjellen på justify-content og align-items?

Justify-content fordeler elementene langs hovedaksen (main axis) — retningen raden eller kolonnen flyter — mens align-items plasserer dem på tvers av den andre aksen (cross axis). Hvis du bytter retning fra row til column, bytter de to aksene plass, slik at justify-content begynner å fungere ovenfra og ned, og align-items fra venstre til høyre.

Hvordan fungerer kontrollene for enkelt-elementer?

Velg et element etter nummer, og angi deretter hvor mye det skal vokse (grow) for å fylle ledig plass, krympe (shrink) når plassen er trang, dets startstørrelse (basis) og dets egen justering på tverraksen (align-self). Rekkefølge (order) flytter et element tidligere eller senere på skjermen uten å røre HTML-koden. Kun elementene du faktisk endrer får sin egen regel i CSS-koden.

Når har wrap og align-content noe å si?

Når bryting (wrapping) er av, tvinges alle elementer inn på én linje og kan presses sammen. Slår du det på, vil elementer som ikke lenger får plass, falle ned på neste linje — det er da align-content tar over og fordeler linjene som en gruppe. Gap setter avstanden mellom elementer og mellom linjer, helt uten marginer.

CSS Cubic Bezier-generatorDra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.Border Radius-generatorRund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.CSS Grid-generatorDefiner kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.CSS clamp()-kalkulatorAngi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.FargekonvertererKonverter farger mellom HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt og resten oppdateres fortløpende.