Flexbox-generator

Skapa en flex-container och dess objekt med visuella kontroller, se layouten reagera direkt och kopiera CSS-koden med ett klick.

Förinställningar
Behållare
Riktning (direction)
Radbryt
Justera vågrätt
Justera objekt
Objekt
Objekt 1
Justera själv
CSS
Justera containern och objekten för att forma din layout.

Din layout byggs direkt i din webbläsare. Inget av det du ställer in här laddas upp till BroBroGo.

Vanliga frågor

Vad är skillnaden mellan justify-content och align-items?

Justify-content fördelar objekten längs huvudaxeln – den riktning som raden eller kolumnen flödar i – medan align-items placerar dem längs den tvärgående axeln. Ändra riktningen från row till column så byter de två axlarna plats, vilket gör att justify-content börjar fungera uppifrån och ner och align-items från vänster till höger.

Hur fungerar inställningarna för enskilda objekt?

Välj ett objekt via dess nummer och ställ sedan in hur mycket det ska växa för att fylla ut ledigt utrymme, hur mycket det ska krympa när det är ont om plats, dess startstorlek (basis) och dess egen justering längs den tvärgående axeln. Order flyttar ett objekt tidigare eller senare på skärmen utan att röra HTML-koden. Endast de objekt du faktiskt ändrar får en egen regel i CSS-koden.

När spelar wrap och align-content roll?

Med radbrytning (wrap) avstängd tvingas alla objekt in på en enda rad och kan pressas ihop. Slå på det så faller objekt som inte längre får plats ner till nästa rad – det är då align-content tar över och fördelar raderna som en grupp. Gap sätter avståndet mellan objekten, och mellan raderna, utan att behöva använda marginaler.

CSS Cubic Bezier-generatorDra i de två handtagen för att forma en övergångskurva, se en punkt följa den bredvid en linjär rörelse och kopiera cubic-bezier()-värdet.Border Radius-generatorRunda varje hörn med reglage, skapa organiska former med det elliptiska läget och kopiera din CSS direkt.Box Shadow-generatorDra i reglagen för att forma en box-shadow, stapla lager för djup och kopiera den färdiga CSS-koden direkt.Gradient-generatorBygg en linjär, radiell eller konisk toning, lägg till färgstopp och ställ in riktningen, och kopiera sedan CSS-koden med ett klick.CSS Grid-generatorStäll in kolumner och rader, dra över cellerna för att placera ut objekt och kopiera CSS-koden med matchande HTML med ett klick.CSS clamp()-kalkylatorAnge en storlek för små och stora skärmar och få ett flytande clamp()-värde som skalas mjukt däremellan – för textstorlekar, padding, marginaler eller gap.FärgkonverterareKonvertera färger mellan HEX, RGB, HSL, HSV, CMYK och LAB – ändra valfritt fält så uppdateras resten automatiskt.