CSS Flexbox Generator

Bygg CSS Flexbox-layouter visuellt med liveförhandsvisning. Justera riktning, justify-content, align-items, wrap och gap. Kopiera CSS-kod. Gratis onlineverktyg.

flex-direction

justify-content

align-items

flex-wrap

gap: 10px

Objekt

Förhandsvisning

CSS-utdata

Referens

Vad är CSS Flexbox?

CSS Flexible Box Layout (Flexbox) är en endimensionell layoutmetod för att arrangera objekt i rader eller kolumner. Objekt flexar (expanderar) för att fylla extra utrymme eller krymper för att passa i mindre utrymmen. Det gör det enkelt att designa flexibla responsiva layoutstrukturer.

Viktiga Flexbox-egenskaper

flex-direction sätter huvudaxelriktningen. justify-content justerar objekt längs huvudaxeln. align-items justerar objekt längs korsaxeln. flex-wrap styr om objekt bryts till nya rader. gap sätter avstånd mellan objekt.

Integritet

All flexbox-generering körs 100 % i din webbläsare. Ingen data skickas till någon server.

← Tillbaka till alla verktyg