Guía rápida de CSS Flexbox
Referencia técnica con propiedades de Flexbox para contenedores y elementos, valores admitidos y patrones de diseño en CSS.
Ejecutar herramienta
Esta guía de consulta rápida reúne las propiedades fundamentales del modelo CSS Flexbox, sus valores admitidos y ejemplos prácticos de código. El contenido cubre la configuración del contenedor flexible, como el modo de visualización, la dirección del eje principal, el salto de línea, la alineación en ambos ejes, la distribución multilínea y el espaciado mediante gap con valores como 16px o 1rem. Asimismo, documenta las reglas para elementos individuales, incluyendo crecimiento, reducción, tamaño base inicial, la propiedad abreviada flex, la alineación particular y el orden de colocación. También detalla los valores predeterminados habituales, como la dirección en fila, la ausencia de salto de línea o el crecimiento en cero. Para agilizar el trabajo diario, la herramienta presenta patrones estructurados de maquetación listos para consultar: centrado de contenido, barras de navegación, cuadrículas adaptables de tarjetas, paneles laterales, pies de página fijos y columnas de anchura uniforme.
Instrucciones
- Inicia la consulta para cargar la ficha de referencia de Flexbox.
- Revisa las secciones dedicadas a las propiedades del contenedor flexible y de los elementos hijos.
- Consulta los valores por defecto y las sintaxis admitidas para cada propiedad.
- Examina los bloques de código con patrones comunes de maquetación para integrarlos en tu hoja de estilos.
Ejemplos
- Centrado de un elemento: define display: flex, justify-content: center y align-items: center en el contenedor.
- Barra de navegación horizontal con separación automática: aplica justify-content: space-between y align-items: center sobre la lista de enlaces.
- Distribución adaptable de tarjetas con salto de línea: combina flex-wrap: wrap con un espaciado gap: 1rem entre tarjetas.
Preguntas frecuentes
¿Qué valores predeterminados aplica Flexbox por defecto?
El contenedor comienza con flex-direction: row y flex-wrap: nowrap, alineando el contenido al inicio. Los elementos hijos parten con flex-grow: 0, flex-shrink: 1, alineación automática y order: 0.
¿Qué unidades se pueden emplear en la propiedad gap?
Admite unidades de longitud como píxeles (por ejemplo, 16px) o medidas relativas como rem (por ejemplo, 1rem) para separar filas y columnas sin márgenes manuales.
¿La herramienta valida código o genera una vista previa gráfica?
No. Proporciona una guía textual de referencia técnica y fragmentos de código CSS, sin ejecutar cálculo de estilos en vivo ni validar reglas externas.