CSS Flexbox -generaattori

Rakenna CSS Flexbox -asetteluja visuaalisesti reaaliaikaisella esikatselulla. Säädä suuntaa, justify-content, align-items, wrap ja gap. Kopioi CSS-koodi. Ilmainen verkkotyökalu.

flex-direction

justify-content

align-items

flex-wrap

gap: 10px

Kohteet

Esikatselu

CSS-tuloste

Viite

Mikä on CSS Flexbox?

CSS Flexible Box Layout (Flexbox) on yksiulotteinen asettelumenetelmä kohteiden järjestämiseksi riveille tai sarakkeisiin. Kohteet joustavat (laajenevat) täyttääkseen ylimääräisen tilan tai kutistuvat sopimaan pienempiin tiloihin. Se tekee joustavien, responsiivisten asettelurakenteiden suunnittelusta helppoa.

Tärkeimmät Flexbox-ominaisuudet

flex-direction asettaa pääakselin suunnan. justify-content tasaa kohteet pääakselin suunnassa. align-items tasaa kohteet poikkiakselin suunnassa. flex-wrap hallitsee rivittymistä uusille riveille. gap asettaa kohteiden välisen etäisyyden.

Tietosuoja

Kaikki flexbox-luonti tapahtuu 100 % selaimessasi. Mitään tietoja ei lähetetä palvelimelle.

← Takaisin kaikkiin työkaluihin