Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
display: flex convierte un elemento en un contenedor flexible, donde sus hijos se acomodan automáticamente en fila o columna.
Explicación
display: flex es el punto de partida de Flexbox:
display: flexConvierte al elemento en un "flex container"; sus hijos directos se vuelven "flex items".
flex-directionDefine el eje principal: row (fila, por defecto) o column (columna).
gapEspacio uniforme entre los elementos flex, sin necesidad de margin manual.
flex: 1Hace que un item crezca para repartirse el espacio disponible junto a sus hermanos.
Reto rápido
Agrega un cuarto item y dale flex: 2 para que ocupe el doble de espacio que los demás.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Antes de Flexbox, centrar algo verticalmente en CSS era famoso por ser complicado. Con display: flex se resuelve en una línea.
Dato extra
Flexbox fue diseñado para layouts en una sola dimensión (fila O columna). Para layouts en dos dimensiones a la vez, existe Grid, que verás pronto.
Error común
Aplicar propiedades de flex (como flex: 1 o align-items) a un elemento que no es hijo directo de un contenedor flex: esas propiedades no tienen ningún efecto ahí.
Siguiente paso
Ya tienes tus elementos en fila. Ahora aprende a controlar exactamente cómo se alinean entre sí.
Ir a la siguiente lección