Cómo usar: 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.
También se busca como: flexbox generator, flexbox playground, flexbox builder, justify-content generator, align-items css, flex layout generator, tailwind flex generator, css flex examples.
Herramientas que combinan con: 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].
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
Preguntas frecuentes
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.
¿Puedo instalar CSS Flexbox Generator como aplicación web y utilizarla sin conexión?
Sí. CSS Flexbox Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.