CSS Flexbox-generator
Med Flexbox-generatorn ställer du in flex-direction, justify-content, align-items, flex-wrap, align-content och gap på en container, förhandsvisar upp till 20 element i realtid och kopierar den genererade CSS:en.
Om verktyget
Med Flexbox-generatorn ställer du in flex-direction, justify-content, align-items, flex-wrap, align-content och gap på en container, förhandsvisar upp till 20 element i realtid och kopierar den genererade CSS:en.
Så använder du det
- Välj riktning och radbrytning.
- Ställ in justify-content och align-items (och align-content för flera rader).
- Ställ in gap och antal element i förhandsvisningen.
- Klicka på Copy CSS för att använda container-reglerna.
Bra att veta
- justify-content placerar elementen längs huvudaxeln; align-items placerar dem längs tväraxeln.
- flex-direction: column byter plats på axlarna, så justify-content verkar då vertikalt.
- align-content har bara effekt när elementen bryts över flera rader.
- Egenskapen gap fungerar i Flexbox i alla aktuella större webbläsare.
- Flexbox är endimensionell; använd CSS Grid för rader och kolumner samtidigt.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur centrerar jag en div med Flexbox?
Sätt display: flex; justify-content: center; align-items: center; på föräldern – då centreras barnet horisontellt och vertikalt.
Vad är skillnaden mellan justify-content och align-items?
justify-content fördelar elementen längs huvudaxeln (en rad som standard); align-items placerar dem längs tväraxeln.
När ska jag använda Flexbox i stället för Grid?
Använd Flexbox för endimensionella layouter som navigeringsfält och knapprader, och Grid för tvådimensionella sidlayouter.
Varför gör align-content ingenting?
align-content gäller bara när flex-wrap låter elementen brytas över mer än en rad.