Flexbox-generator

Opsæt en flex-container og dens elementer med visuelle kontroller, se layoutet reagere live, og kopier CSS-koden med ét klik.

Forudindstillinger
Container
Retning (flex-direction)
Linjeskift (Wrap)
Fordel indhold
Juster elementer
Elementer
Element 1
Juster element
CSS
Juster containeren og elementerne for at forme dit layout.

Dit layout opbygges direkte i din browser. Intet af det, du indstiller her, uploades til BroBroGo.

FAQ

Hvad er forskellen på justify-content og align-items?

Justify-content fordeler elementerne langs hovedaksen (main axis) — den retning rækken eller søjlen flyder — mens align-items placerer dem på tværs af den anden akse (cross axis). Skifter du retningen fra række til søjle, bytter de to akser plads, så justify-content begynder at virke oppefra og ned, og align-items fra venstre mod højre.

Hvordan fungerer indstillingerne for de enkelte elementer?

Vælg et element ud fra dets nummer, og indstil derefter, hvor meget det må vokse (grow) for at fylde overskydende plads ud, hvor meget det må krympe (shrink), når pladsen er trang, dets startstørrelse (basis) og dets egen justering på tværs af aksen (align-self). Order flytter et element frem eller tilbage på skærmen uden at ændre i HTML-koden. Det er kun de elementer, du rent faktisk ændrer, der får deres egen regel i CSS-koden.

Hvornår har wrap og align-content betydning?

Når linjeskift (wrap) er slået fra, tvinges alle elementer ind på én linje og kan blive klemt sammen. Slår du det til, vil elementer, der ikke længere kan være der, rykke ned på næste linje — og det er her, align-content tager over og styrer afstanden mellem linjerne som en samlet gruppe. Gap angiver afstanden mellem elementerne og mellem linjerne uden brug af marginer.

CSS Cubic Bezier-generatorTræk i de to håndtag for at forme en easing-kurve, se en prik bevæge sig langs den i forhold til en jævn bevægelse, og kopier cubic-bezier()-værdien.Border radius-generatorAfrund hvert hjørne med skydere, form organiske klatter med elliptisk tilstand, og kopier din CSS med det samme.Box shadow-generatorTræk i skyderne for at forme en box-shadow, stabel lag for at skabe dybde, og kopier den færdige CSS med det samme.Gradient-generatorByg en lineær, radial eller konisk gradient, tilføj farvestop og indstil retningen, og kopier derefter CSS-koden med ét klik.CSS Grid-generatorIndstil dine søjler og rækker, træk hen over cellerne for at placere elementer, og kopier grid-CSS med tilhørende HTML med ét klik.CSS clamp() BeregnerIndtast en størrelse til små og store skærme, og få en flydende clamp()-værdi, der skalerer jævnt derimellem — til skriftstørrelser, padding, marginer eller gaps.FarvekonverterKonverter farver mellem HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt, og resten opdateres løbende.