So nutzt du: CSS Flexbox Generator
- Pick a preset — center, navbar, wrapping cards, sidebar, stack — or start from scratch.
- Set the container: flex-direction, flex-wrap, justify-content (main axis), align-items (cross axis) and gap.
- Click an item to set its flex-grow, shrink, basis, order and align-self; use + Add item or Remove to change how many there are.
- Resize the container to test it, then copy the CSS, HTML or Tailwind classes.
The two axes of flexbox
Flexbox lays items out along a main axis (set by flex-direction) and a cross axis at right angles to it. justify-content distributes items along the main axis; align-items aligns them on the cross axis. Switch to column and the two swap — which is why “center vertically” sometimes needs justify-content and sometimes align-items.
flex: grow shrink basis
| Shorthand | Means | Use it for |
|---|---|---|
flex: 1 | 1 1 0% | Equal-width columns that share the space |
flex: auto | 1 1 auto | Grow from the content’s own size |
flex: none | 0 0 auto | Fixed items such as a logo or icon |
flex: 1 1 240px | Start at 240px, then grow or shrink | Wrapping card grids |
margin-left: auto on one item pushes it — and everything after it — to the far end, the classic way to right-align a “Sign in” button in a navbar. For two-dimensional layouts with rows and columns, the CSS Grid Generator is the better fit.
Auch gesucht als: flexbox generator, flexbox playground, flexbox builder, justify-content generator, align-items css, flex layout generator, tailwind flex generator, css flex examples.
Passende Tools zu: CSS Flexbox Generator
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS to Tailwind Converter — Paste CSS rules or declarations and get the equivalent Tailwind utility classes for each selector — including hover: states and arbitrary values like p-[13px].
- Klemmenrechner — Gib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen clamp() Wert mit einer Erklärung der Berechnung, einer Live-Vorschau und einer vollständigen Skalierung für flüssige Schriftgrößen oder Abstände.
Häufige Fragen
How do I center a div with flexbox?
On the parent: display: flex; justify-content: center; align-items: center; and give it a height. Choose the “Center anything” preset to see it.
What is the difference between justify-content and align-items?
justify-content positions items along the main axis (horizontal in a row), align-items along the cross axis (vertical in a row). With flex-direction: column they swap.
Why don’t my flex items wrap?
flex-wrap defaults to nowrap, so items shrink to fit one line. Set flex-wrap: wrap and give items a flex-basis or min-width so they have a size to wrap at.
Flexbox or grid?
Flexbox for one direction at a time — navbars, toolbars, centering, rows of cards. Grid when you need rows and columns that line up, like page layouts and dashboards.
Kann ich CSS Flexbox Generator als Web-App installieren und offline nutzen?
Ja. CSS Flexbox Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.