Comment utiliser : 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.
Aussi recherché comme : flexbox generator, flexbox playground, flexbox builder, justify-content generator, align-items css, flex layout generator, tailwind flex generator, css flex examples.
Outils complémentaires : 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].
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
Questions fréquentes
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.
Puis-je installer CSS Flexbox Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS Flexbox Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.