Flexbox generátor

Kísérletezzen a hajlítás irányával, csomagolja be, igazítsa és igazítsa. Nézze meg élőben az elemek elrendezésének frissítését, majd másolja a tároló CSS-jét.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

Kísérletezzen a hajlítási irányokkal, tördeljen, igazítson és igazítson – tekintse meg az elrendezések élőben történő frissítését.
A böngészőben fut
Ingyenesen használható

Használati útmutató

Állítsa be a hajlítási irányt és tekerje be.
Állítsa be az igazítási tartalmat és az elemek igazítását.
Másolja a Flexbox CSS-t.

How this tool works

Állítsa be a hajlítási irányt és tekerje be.
Állítsa be az igazítási tartalmat és az elemek igazítását.
Másolja a Flexbox CSS-t.

Recommended settings

Először használja az alapértelmezett beállításokat, majd módosítsa, ha szükséges

Supported formats

Text / on-page input

File size and limits

A nagyon összetett többrétegű előnézetek lassabbnak tűnhetnek a régebbi telefonokon.

Privacy

A szín- és CSS-generátorok teljes egészében az Ön böngészőjében futnak. Az előnézetek és a konverziók soha nem töltik fel a stílusokat.

Common use cases

Használja a Flexbox Generatort, amikor csak szüksége van rá: Kísérletezzen a hajlítási irányokkal, tördeljen, igazítson és igazítson – tekintse meg az elrendezések frissítését élőben.

Troubleshooting

Az előnézet beillesztés után másképp néz ki

Ellenőrizze, hogy az oldalon található-e versengő CSS (visszaállítások, örökölt színek). Először másolja át a generált szabályt egy elszigetelt stíluslapba.

GYIK

Ez feltölti a CSS-emet?

Nem. A generátorok és konverterek élő előnézettel futnak a böngészőben.

Szükségem van fiókra?

Nem. Nyissa meg az eszközt, módosítsa a vezérlőket, és másolja a CSS-t.