Como 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.
Também pesquisado como: flexbox generator, flexbox playground, flexbox builder, justify-content generator, align-items css, flex layout generator, tailwind flex generator, css flex examples.
Ferramentas que combinam com: 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 braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
Perguntas frequentes
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.
Posso instalar o CSS Flexbox Generator como um aplicativo da web e usá-lo offline?
Sim. O CSS Flexbox Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.