Flexbox-lekplats

Alla verktyg

Experimentera med CSS Flexbox-egenskaper på live-objekt och kopiera den genererade layout-CSS:en.

Förhandsvisning Klicka på ett objekt för att redigera det
Genererad CSS
—

Allt körs i din webbläsare – ingenting laddas upp.

Behållare
12px
Objekt
0
Valt objekt

Om Flexbox-lekplats

Flexbox Playground är en praktisk sandlåda för CSS flexbox. Ställ in containeregenskaperna — flex-direction, flex-wrap, justify-content, align-items, align-content och gap — och se upp till 12 levande objekt flöda om i förhandsvisningen när du ändrar varje värde. Det är det snabbaste sättet att förstå vad varje egenskap faktiskt gör.

Objekten är individuellt redigerbara: klicka på ett för att markera det och justera dess flex-grow, flex-shrink, flex-basis, align-self och order. Att se ett objekt växa och ta upp ledigt utrymme medan dess syskon behåller sin bredd lär dig flex-storleksmodellen snabbare än något diagram.

Playgrounden genererar ren CSS för containern och alla objekt med icke-standardinställningar — kopiera den direkt till din stilmall. Allt körs i din webbläsare utan att något laddas upp, och en återställningsknapp tar dig tillbaka till ett rent utgångsläge.

Så använder du Flexbox-lekplats

  1. Ställ in containerns flex-direction, wrap, justify-content, align-items, align-content och gap.
  2. Lägg till eller ta bort objekt — mellan 2 och 12 — för att spegla din verkliga komponent.
  3. Klicka på ett objekt och justera dess grow, shrink, basis, align-self och order.
  4. Se hur den levande förhandsvisningen uppdateras vid varje ändring.
  5. Kopiera den genererade CSS-koden och klistra in den i ditt projekt.

Vanliga frågor

flex-grow fördelar överblivet utrymme: ett objekt med grow 2 får dubbelt så mycket extra utrymme som ett med grow 1. flex-shrink fungerar omvänt när utrymmet är knappt. Båda är förhållanden mellan syskon, inte absoluta storlekar.

align-items positionerar objekt längs tvärgående axeln inom sin rad. align-content fördelar flera radbrutna rader inom containern — den har bara en synlig effekt när flex-wrap skapar mer än en rad.

Varje flex-objekt har som standard order 0; objekten läggs ut från lägsta till högsta order. Att ändra ett objekts order flyttar det visuellt utan att röra HTML-koden — DOM-ordningen, och därmed skärmläsarordningen, förblir densamma.

Ja. Den genererade CSS-koden omfattar containerreglerna plus en selektor för varje objekt vars grow, shrink, basis, align-self eller order skiljer sig från standarden, så du kan klistra in en komplett, fungerande layout.

Ja — gratis, ingen registrering och helt klientbaserad. Dina experiment lämnar aldrig webbläsarfliken.
Dela
Relaterade verktyg
E-postsignaturbyggare Designa en professionell HTML-e-postsignatur från 30 mallar, anpassa den och spara. Gratis
Ikon till PNG Konvertera Bootstrap Icons, Font Awesome och fler till anpassade PNG-bilder — gratis, i din webbläsare. Gratis
App-ikongenerator Generera en komplett, butiksfärdig appikonuppsättning för App Store och Google Play — förstklassiga gradient-, mesh- och mönsterbakgrunder, byggda från din logotyp. Gratis
Favicon-generator Bygg ett komplett favicon-paket från en logotyp, en typsnittsikon eller ett monogram — favicon.ico, moderna PNG-filer, Apple touch-ikonen, PWA-ikoner, ett webbmanifest och HTML-utdraget. Gratis
CSS Box Shadow-generator Skapa skiktade CSS box-shadows med realtidsskjutreglage för förskjutning, oskärpa, spridning, färg, opacitet och infällning — förhandsgranska på ett riktigt element och kopiera CSS omedelbart. Gratis
CSS Border-Radius-generator Skapa CSS border-radius visuellt med live-förhandsvisning och kopiera produktionsfärdig kod. Gratis
Populära sökningar
flexbox-lekplats css flexbox-generator flex container-generator justify-content align-items-verktyg css flex layout-generator flexbox-visualiserare flexbox kodgenerator
Behöver du hjälp?
Hittade du ett problem med det här verktyget? Berätta för oss.
Rapportera ett problem

Lägg till det här gratisverktyget på din egen webbplats — kopiera och klistra in koden nedan.