Flexbox Playground

Una herramienta interactiva para aprender y probar visualmente las propiedades de CSS Flexbox. Ajusta la configuración del contenedor y elementos mientras generas código CSS puro, Tailwind CSS y SCSS automáticamente.

Cómo Usar

Ajusta la configuración básica de Flexbox con las propiedades del contenedor

Añade o elimina elementos para ver la vista previa

Configura las propiedades de elementos individuales

Copia el código CSS, Tailwind o SCSS generado

Características Principales

Vista previa en tiempo real

Soporte para todas las propiedades de Flexbox

Generación de código CSS puro, Tailwind CSS y SCSS

Adición y eliminación dinámica de elementos

Soporte de vista previa responsiva

Elemento Seleccionado

3 items

Propiedades del Contenedor

Layout Basics

Display

Flex Direction

Alignment

Justify Content

Align Items

Advanced

Flex Wrap

Align Content

Gap

Propiedades del Elemento

Item 1

Flex Properties

Flex Grow

Flex Shrink

Flex Basis

Position

Align Self

Order

Vista Previa

Live Preview

Item 1

Selected

Item 2

Item 3

Direction:
row

Justify:
flex-start

Align:
stretch

Wrap:
nowrap

Código Generado

Pure CSS

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

/* Item Styles */
.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

Preguntas Frecuentes (FAQ)

Flexbox es un método de diseño introducido en CSS3. Proporciona características flexibles para organizar y alinear elementos dentro de un contenedor, siendo ideal para el diseño responsivo.

justify-content controla la alineación a lo largo del eje principal, mientras que align-items controla la alineación a lo largo del eje transversal. Con flex-direction: row, justify-content afecta la alineación horizontal y align-items afecta la alineación vertical.

flex-grow establece la tasa de crecimiento al llenar el espacio disponible, flex-shrink establece la tasa de reducción cuando el espacio es limitado, y flex-basis establece el tamaño inicial. Estos pueden combinarse usando la propiedad abreviada flex.

Tailwind CSS usa clases utilitarias como flex, flex-row, justify-center e items-center para implementar diseños Flexbox. Puedes usar los nombres de clase generados por esta herramienta directamente.

Flexbox ajusta automáticamente la colocación de elementos según el tamaño de pantalla. Usando flex-wrap y flex-direction, puedes lograr diseños óptimos para diferentes dispositivos.