CSS
Tutorial CSS: Flexbox para crear layouts y estructuras
CSS flexbox: diseño y alineación. Domina el diseño y alineación de elementos con Flexbox en CSS mediante ejemplos prácticos.
Aprende CSS GRATIS y certifícate¿Qué es Flexbox, para qué sirve y por qué es importante?
Flexbox, o el módulo flexible de CSS, es un sistema de diseño introducido en CSS3 que entrega una manera más efectiva de alinear y distribuir elementos dentro de un contenedor. Este sistema trabaja en una dirección tanto horizontal como vertical, permitiendo la creación de estructuras de diseño más fluidas y adaptables. Flexbox responde de manera eficiente al espacio ocupado por los elementos anidados, ajustándolos para llenar uniformemente el contenedor y garantizar la mejor presentación posible.
Flexbox sirve para diseñar interfaces y layouts complejos de forma más sencilla y eficiente que los métodos tradicionales basados en flujos de bloques o en líneas flotantes. Antes de Flexbox, una gran parte de los layouts se conseguían con trucos y hacks, como el uso de floats, positioning y margins, lo que hacía que la creación y mantenimiento de dichos diseños fuera laboriosa y propensa a errores.
Las características más destacadas de Flexbox incluyen:
- Control sobre la dirección de los ejes: Flexbox permite definir el eje principal y el eje cruzado independientemente, lo cual es fundamental para crear estructuras de diseño dinámicas y adaptables.
- Alineación y distribución: Facilita la alineación de elementos tanto vertical como horizontalmente, ofreciendo propiedades específicas para centrado, justificación y espaciamiento.
- Orden y dimensiones: Posibilita cambiar el orden de los elementos sin alterar el HTML, y ajustar sus tamaños según el espacio disponible y deseado.
- Flexibilidad a responsive designs: Flexbox permite ajustes automáticos al cambiar las dimensiones del viewport, lo cual es crucial para desarrollar aplicaciones responsivas que se adapten a múltiples dispositivos y tamaños de pantalla.
Es importante porque simplifica y mejora sustancialmente el desarrollo de layouts. Flexbox permite a los desarrolladores centrarse en el diseño y la disposición de los elementos sin preocuparse de las complejidades del flujo de documentos tradicionales en CSS. Gracias a sus capacidades intuitivas y eficaces, Flexbox ha reemplazado en gran medida técnicas previas y ha pasado a ser una herramienta fundamental en el desarrollo moderno de front-end.
Además, los navegadores modernos soportan completamente Flexbox, lo que garantiza consistencia y confianza al usar esta técnica en producción. Es una herramienta indispensable para cualquiera que esté desarrollando interfaces y layouts complejos y adaptables en la web hoy día.
Conceptos básicos de Flexbox
El modelo de diseño Flexbox consiste en un contenedor y elementos hijos que se disponen automáticamente conforme a una serie de reglas definidas por propiedades CSS específicas. El contenedor Flexbox activa su comportamiento mediante la propiedad display
, asignándole el valor flex
o inline-flex
. Una vez activado, los elementos dentro del contenedor se convierten en elementos flexibles, sujetos a las reglas de Flexbox.
Ejes principal y cruzado
En Flexbox, los elementos son organizados a lo largo de dos ejes:
- Eje principal (main axis): Es el eje a lo largo del cual se alinean los elementos flexibles. Por defecto, este eje es horizontal y se extiende de izquierda a derecha.
- Eje cruzado (cross axis): Es perpendicular al eje principal; por defecto, este eje es vertical y se extiende de arriba hacia abajo.
Propiedades básicas del contenedor Flex
- display: Activa el contenedor Flexbox.
.container {
display: flex; /* o inline-flex */
}
- flex-direction: Define la dirección del eje principal.
.container {
flex-direction: row; /* default */
/* Otros valores posibles: row-reverse, column, column-reverse */
}
- flex-wrap: Controla si los elementos flexibles deben o no deben envolverse.
.container {
flex-wrap: nowrap; /* default */
/* Otros valores posibles: wrap, wrap-reverse */
}
- justify-content: Define la alineación de los elementos flexibles a lo largo del eje principal.
.container {
justify-content: flex-start; /* default */
/* Otros valores posibles: flex-end, center, space-between, space-around, space-evenly */
}
- align-items: Define la alineación de los elementos flexibles a lo largo del eje cruzado.
.container {
align-items: stretch; /* default */
/* Otros valores posibles: flex-start, flex-end, center, baseline */
}
- align-content: Aplica alineación en el eje cruzado cuando hay espacio adicional tras el wrapping.
.container {
align-content: stretch; /* default */
/* Otros valores posibles: flex-start, flex-end, center, space-between, space-around */
}
Elementos flexibles (flex items)
Los items flexibles son los hijos directos de un contenedor Flex. Las propiedades específicas utilizadas en ellos son:
- order: Cambia el orden en que se pintan los elementos.
.item {
order: 0; /* default */
/* Otros valores: cualquier número entero */
}
- flex-grow: Define la capacidad de un elemento para crecer si hay espacio disponible.
.item {
flex-grow: 0; /* default */
/* Otros valores: números positivos */
}
- flex-shrink: Define la capacidad de un elemento para encogerse si es necesario.
.item {
flex-shrink: 1; /* default */
/* Otros valores: números positivos */
}
- flex-basis: Especifica el tamaño inicial de un elemento antes de distribuir el espacio restante.
.item {
flex-basis: auto; /* default */
/* Otros valores posibles: cualquier unidad CSS válida como px, %, etc. */
}
- align-self: Permite a los elementos sobrescribir la alineación definida por
align-items
.
.item {
align-self: auto; /* default */
/* Otros valores posibles: flex-start, flex-end, center, baseline, stretch */
}
Aplicando estas propiedades y conceptos se obtiene un control preciso sobre el diseño y la disposición de los elementos, facilitando la creación de layouts complejos y altamente adaptables con facilidad en CSS. Flexbox es una herramienta eficaz y esencial en el arsenal de un desarrollador front-end moderno, promoviendo una semántica más limpia y un estilo de diseño más intuitivo y flexible.
Propiedades y uso del contenedor Flex
El contenedor Flex es la base sobre la cual se construyen los layouts utilizando Flexbox. Este contenedor define cómo los elementos hijos se organizan y cómo ocupan el espacio dentro de dicho contenedor. A continuación, se detallan las propiedades más importantes para configurar un contenedor Flex y su respectivo uso.
display
Esta propiedad activa el modo de diseño Flexbox para un contenedor. Tiene dos valores posibles:
.container {
display: flex; /* Activa el contenedor Flex */
/* o */
display: inline-flex; /* Activa el contenedor Flex en modo inline */
}
flex-direction
Define la dirección del eje principal sobre el cual se distribuirán los elementos. Los valores posibles son:
.container {
flex-direction: row; /* Default: elementos alineados en una fila */
flex-direction: row-reverse; /* Elementos alineados en una fila inversa */
flex-direction: column; /* Elementos alineados en una columna */
flex-direction: column-reverse; /* Elementos alineados en una columna inversa */
}
flex-wrap
Controla si los elementos se envuelven dentro del contenedor cuando el espacio no es suficiente. Sus valores son:
.container {
flex-wrap: nowrap; /* Default: no se envuelven */
flex-wrap: wrap; /* Los elementos se envuelven en líneas nuevas */
flex-wrap: wrap-reverse; /* Los elementos se envuelven en líneas nuevas en sentido inverso */
}
flex-flow
Una propiedad abreviada para flex-direction
y flex-wrap
:
.container {
flex-flow: row nowrap; /* Default */
/* Ejemplo alternativo */
flex-flow: column wrap;
}
justify-content
Alinea los elementos a lo largo del eje principal, controlando cómo se distribuyen el espacio restante. Los valores comunes son:
.container {
justify-content: flex-start; /* Default: alineados al inicio del contenedor */
justify-content: flex-end; /* Alineados al final del contenedor */
justify-content: center; /* Centra los elementos */
justify-content: space-between; /* Espacio igual entre los elementos */
justify-content: space-around; /* Espacio igual alrededor de los elementos */
justify-content: space-evenly; /* Distribución equitativa de espacio entre los elementos */
}
align-items
Alinea los elementos a lo largo del eje cruzado dentro del contenedor. Los valores típicos incluyen:
.container {
align-items: stretch; /* Default: Estira los elementos para llenar el contenedor */
align-items: flex-start; /* Alinea los elementos al inicio del eje cruzado */
align-items: flex-end; /* Alinea los elementos al final del eje cruzado */
align-items: center; /* Centra los elementos en el eje cruzado */
align-items: baseline; /* Alinea los elementos según sus líneas base */
}
align-content
Aplica alineación en el eje cruzado cuando hay espacio extra en las líneas envolventes. Es útil cuando hay múltiples líneas de elementos flexibles. Sus valores son:
.container {
align-content: stretch; /* Default: Estira las líneas para llenar el contenedor */
align-content: flex-start; /* Alinea las líneas al inicio del contenedor */
align-content: flex-end; /* Alinea las líneas al final del contenedor */
align-content: center; /* Centra las líneas dentro del contenedor */
align-content: space-between; /* Espacio igual entre las líneas */
align-content: space-around; /* Espacio igual alrededor de las líneas */
}
Estas propiedades permiten un control granular sobre cómo se distribuyen, alinean y organizan los elementos dentro de un contenedor Flex. La combinación adecuada de estas propiedades puede simplificar considerablemente la construcción de layouts complejos y responsivos.
Propiedades y uso del elemento Flex
Los elementos Flex (o items) son los hijos directos de un contenedor Flex. Cada uno de estos elementos puede ser controlado mediante propiedades específicas que permiten ajustar su tamaño, alineación, orden y comportamiento dentro del contenedor Flex, ofreciendo un control detallado sobre cómo se distribuyen y se comportan. A continuación se describen las propiedades más importantes para configurar un elemento Flex y su respectivo uso.
order
Esta propiedad controla el orden en que se disponen los elementos Flex dentro del contenedor Flex, sin necesidad de cambiar el orden en el HTML. Por defecto, todos los elementos tienen un valor de order
igual a 0
.
.item {
order: 1; /* Cambia el orden de este elemento específico */
}
Los valores de order
pueden ser positivos o negativos, y los elementos se dispondrán en el orden numérico ascendente.
flex-grow
Define la capacidad de un elemento Flex para crecer si hay espacio disponible en el contenedor. Por defecto, todos los elementos tienen un valor de flex-grow
igual a 0
, lo que significa que no crecerán más allá de su tamaño base.
.item {
flex-grow: 2; /* Este elemento crecerá dos veces más que otros con flex-grow: 1 */
}
Un valor mayor significa que el elemento ocupará más espacio disponible en comparación con elementos con menor valor de flex-grow
.
flex-shrink
Establece la capacidad de un elemento Flex para reducir su tamaño si es necesario dentro del contenedor. Por defecto, los elementos tienen un valor de flex-shrink
igual a 1
.
.item {
flex-shrink: 0; /* Este elemento no se encogerá ni reducirá su tamaño */
}
Un valor mayor significa que el elemento se encogerá más en comparación con elementos con menor valor de flex-shrink
cuando el espacio sea limitado.
flex-basis
Especifica el tamaño inicial del elemento antes de que se distribuyan los espacios restantes según los valores de flex-grow
y flex-shrink
. El valor por defecto es auto
, que significa que se utilizará el tamaño del contenido o cualquier dimensión explícita aplicada al elemento.
.item {
flex-basis: 100px; /* El tamaño inicial de este elemento será de 100px */
}
Esta propiedad puede aceptar cualquier unidad de medida CSS válida, como px
, %
, em
, etc.
flex
Es una propiedad abreviada para flex-grow
, flex-shrink
y flex-basis
. Usando esta propiedad, se pueden definir todas las propiedades de flexibilidad del elemento Flex en una sola línea.
.item {
flex: 1 0 100px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 100px */
}
.item2 {
flex: 2; /* flex-grow: 2, flex-shrink: 1, flex-basis: 0% (por defecto) */
}
align-self
Permite modificar la alineación de un elemento Flex a lo largo del eje cruzado, sobrescribiendo la alineación definida por la propiedad align-items
del contenedor Flex. Esto proporciona un control específico sobre la alineación de elementos individuales.
.item {
align-self: flex-start; /* Alinea este elemento al inicio del eje cruzado */
align-self: flex-end; /* Otras posibles alineaciones incluyen: flex-end, center, baseline, stretch (default) */
}
Estas propiedades ofrecen un control detallado sobre cada elemento Flex, lo cual es fundamental para construir layouts precisos y adaptables. Al combinar adecuadamente estas propiedades con las del contenedor Flex, se pueden crear diseños complejos y altamente responsivos que se adapten a diferentes contextos y dimensiones de pantalla.
Diseños avanzados con Flexbox
Para construir diseños avanzados con Flexbox, es esencial combinar las propiedades básicas y más complejas de Flexbox para controlar la disposición detallada de elementos dentro de un contenedor. A continuación, se presentan algunos ejemplos prácticos que muestran cómo aplicar Flexbox para resolver desafíos de diseño comunes de forma avanzada.
Distribución de espacio con justify-content y align-items
Para distribuir equitativamente los elementos en un contenedor y alinear los elementos en el centro de ambos ejes:
.container {
display: flex;
justify-content: space-between; /* Distribuye el espacio restante entre los elementos */
align-items: center; /* Centra los elementos a lo largo del eje cruzado */
height: 100vh; /* Ocupa toda la altura disponible del viewport */
}
.item {
width: 100px;
height: 100px;
background-color: #4CAF50;
}
Esto creará un contenedor donde los elementos con la clase item
están distribuidos uniformemente y centrados verticalmente en la página.
Barra de navegación horizontal con flex
Se puede construir una barra de navegación con elementos flexibles que se adapten al tamaño del contenedor:
<nav class="navbar">
<div class="nav-item">Inicio</div>
<div class="nav-item">Servicios</div>
<div class="nav-item">Nosotros</div>
<div class="nav-item">Contacto</div>
</nav>
.navbar {
display: flex;
justify-content: space-around; /* Distribuye los elementos uniformemente, con espacios iguales alrededor */
background-color: #333;
}
.nav-item {
color: white;
padding: 14px 20px;
text-align: center;
flex: 1; /* Permite que cada elemento crezca uniformemente */
}
En este caso, la barra de navegación adapta sus elementos en función del espacio disponible, equilibrándolos automáticamente.
Layout de tarjetas responsivas
Crear un layout de tarjetas responsivo que se ajuste automáticamente a diferentes tamaños de pantalla:
<div class="card-container">
<div class="card">Tarjeta 1</div>
<div class="card">Tarjeta 2</div>
<div class="card">Tarjeta 3</div>
<div class="card">Tarjeta 4</div>
</div>
.card-container {
display: flex;
flex-wrap: wrap; /* Permite que las tarjetas se envuelvan en múltiples líneas */
gap: 20px; /* Espacio entre las tarjetas */
}
.card {
flex: 1 1 calc(25% - 20px); /* Ocupan un cuarto del ancho del contenedor menos el espacio del gap */
box-sizing: border-box;
padding: 20px;
background-color: #f1f1f1;
border: 1px solid #ddd;
}
Este diseño hace uso de flex-wrap
y gap
para asegurarse de que las tarjetas se distribuyan correctamente incluso cuando el tamaño de la ventana cambie, creando un diseño responsivo y adaptativo.
Alineación vertical y horizontal en el centro
Para centrar un elemento hijo tanto vertical como horizontalmente dentro de un contenedor:
<div class="center-container">
<div class="center-item">Centrado</div>
</div>
.center-container {
display: flex;
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
height: 100vh; /* Ocupa toda la altura del viewport para centrar verticalmente */
}
.center-item {
background-color: #2196F3;
color: white;
padding: 20px;
}
Este ejemplo es útil para situaciones en las que un elemento debe estar perfectamente centrado en la pantalla.
Uso avanzado de flex-grow y flex-shrink
Controlar cómo crecen y se encogen los elementos en relación con otros:
<div class="grow-shrink-container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
.grow-shrink-container {
display: flex;
height: 200px;
}
.box {
padding: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.box1 {
background-color: #ff5722;
flex-grow: 1;
flex-shrink: 2;
}
.box2 {
background-color: #4caf50;
flex-grow: 2;
flex-shrink: 1;
}
.box3 {
background-color: #2196f3;
flex-grow: 3;
flex-shrink: 1;
}
En este ejemplo, cada caja crecerá y se encogerá en proporción a sus valores de flex-grow
y flex-shrink
específicos.
Usando estas técnicas avanzadas de Flexbox, se pueden lograr diseños altamente dinámicos y responsivos que se adaptan perfectamente a diferentes necesidades y dispositivos, ofreciendo una experiencia de usuario limpia y eficiente.
Ejercicios de esta lección Flexbox para crear layouts y estructuras
Evalúa tus conocimientos de esta lección Flexbox para crear layouts y estructuras con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja Y Posicionamiento
Propiedades De Posicionamiento
Modelo Caja Y Posicionamiento
Propiedad 'Display'
Modelo Caja Y Posicionamiento
Elementos 'Float' Y 'Clear'
Modelo Caja Y Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox Y Grid
Css Grid Para Crear Layouts Y Estructuras
Flexbox Y Grid
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
Introducción A Tailwind Css
Introducción Y Entorno
Instalación De Tailwind Css
Introducción Y Entorno
Fundamentos Del Sistema De Utility-first En Tailwind Css
Fundamentos
Fundamentos Del Diseño Responsive En Tailwind Css
Fundamentos
Tipografía Y Fuentes En Tailwind Css
Clases De Utilidad
Clases De Tamaño De Tailwind Css
Clases De Utilidad
Utilidades De Espaciado Y Alineación De Tailwind Css
Clases De Utilidad
Clases De Colores Y Fondo De Tailwind Css
Clases De Utilidad
Clases De Bordes De Tailwind Css
Clases De Utilidad
Hover, Focus Y Estado De Tailwind Css
Clases De Utilidad
Transiciones Y Animaciones De Tailwind Css
Clases De Utilidad
Contenedores Y Columnas En Tailwind Css
Layout
Flexbox En Tailwind Css
Layout
Grid En Tailwind Css
Layout
Conocimiento General De Tailwind Css - Evaluación Multirespuesta
Evaluación
Conocimiento General De Tailwind Css - Evaluación Código
Evaluación
Certificados de superación de CSS
Supera todos los ejercicios de programación del curso de CSS y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el concepto y la importancia de Flexbox en CSS.
- Aprender a manejar los ejes principal y cruzado en Flexbox.
- Utilizar las propiedades principales de contenedores Flex para organizar elementos.
- Controlar alineaciones, órdenes y tamaños de elementos flexibles.
- Aplicar Flexbox en diseños responsivos.
- Resolver problemas de diseño complejos y crear interfaces adaptables.