Playground de Flexbox

Playground interactivo de CSS Flexbox para aprender y generar propiedades de contenedor y elementos flex

Procesado localmente en tu navegador

Gratis

Sin anuncios

No requiere cuenta

Preview

Click an item to edit its individual flex properties. Add up to 12 items.

Presets de diseño

CSS generado

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

Contenedor

flex-direction

justify-content

align-items

flex-wrap

gap8px

Item Properties

Click on an item in the preview to edit its properties.

Todos los elementos

Item 1

Item 2

Item 3