CSS
Tutorial CSS: Propiedades de los Items Flex
Aprende cómo usar flex-grow, flex-shrink, flex-basis y shorthand flex para controlar el tamaño y comportamiento de elementos flex en CSS.
Aprende CSS y certifícateControl de crecimiento con flex-grow y su funcionamiento
La propiedad flex-grow es una de las herramientas más útiles que nos ofrece Flexbox para controlar cómo los elementos hijos (flex items) crecen dentro de un contenedor flexible. Esta propiedad determina la capacidad de crecimiento de un elemento en relación con los demás elementos del mismo contenedor.
Cuando hay espacio disponible en el contenedor flex, flex-grow define cómo se distribuirá ese espacio extra entre los elementos. Por defecto, todos los elementos flex tienen un valor de flex-grow: 0
, lo que significa que no crecerán más allá de su tamaño base.
Valores y comportamiento básico
La propiedad flex-grow acepta un valor numérico no negativo que actúa como una proporción relativa:
.item {
flex-grow: 1; /* Valor por defecto: 0 */
}
- flex-grow: 0 - El elemento no crecerá más allá de su tamaño base
- flex-grow: 1 - El elemento crecerá para ocupar el espacio disponible
- flex-grow: 2 - El elemento crecerá el doble que un elemento con valor 1
Cómo se calcula el espacio
Para entender cómo funciona flex-grow, veamos un ejemplo sencillo:
.container {
display: flex;
width: 500px;
}
.item-1 {
width: 100px;
flex-grow: 1;
}
.item-2 {
width: 100px;
flex-grow: 2;
}
.item-3 {
width: 100px;
flex-grow: 1;
}
En este ejemplo:
- El contenedor tiene 500px de ancho
- Los tres elementos tienen un ancho base de 100px cada uno
- El espacio total ocupado por los elementos es 300px
- El espacio disponible es 200px (500px - 300px)
Para distribuir este espacio disponible:
- Sumamos todos los valores de flex-grow: 1 + 2 + 1 = 4
- Cada "unidad" de flex-grow vale 200px ÷ 4 = 50px
- El primer elemento recibe 50px extra (1 × 50px)
- El segundo elemento recibe 100px extra (2 × 50px)
- El tercer elemento recibe 50px extra (1 × 50px)
Ejemplos prácticos
Veamos algunos casos de uso comunes:
1. Distribución equitativa del espacio
.container {
display: flex;
}
.item {
flex-grow: 1; /* Todos los elementos crecen por igual */
}
Este patrón es muy útil para crear diseños de igual anchura, como menús de navegación o galerías de imágenes.
2. Elemento principal con elementos secundarios
.container {
display: flex;
}
.main-content {
flex-grow: 3; /* Ocupa la mayor parte del espacio */
}
.sidebar {
flex-grow: 1; /* Ocupa menos espacio */
}
Este patrón es perfecto para layouts con barra lateral, donde el contenido principal debe ocupar más espacio que la barra lateral.
3. Botones de acción con diferentes prioridades
.button-container {
display: flex;
gap: 10px;
}
.primary-button {
flex-grow: 2; /* Botón principal más ancho */
}
.secondary-button {
flex-grow: 1; /* Botones secundarios más estrechos */
}
Comportamiento con flex-basis
Es importante entender que flex-grow trabaja en conjunto con flex-basis, que define el tamaño inicial de un elemento antes de que se aplique el crecimiento:
.container {
display: flex;
width: 500px;
}
.item {
flex-basis: 100px;
flex-grow: 1;
}
En este caso, cada elemento comienza con 100px (flex-basis) y luego crece equitativamente para ocupar el espacio restante.
Consideraciones importantes
- flex-grow solo distribuye el espacio disponible después de que todos los elementos hayan alcanzado su tamaño base.
- Si no hay espacio extra disponible, flex-grow no tiene efecto.
- Los valores decimales son válidos (como
flex-grow: 0.5
). - Un valor de 0 significa que el elemento no crecerá, independientemente del espacio disponible.
Ejemplo visual
Para visualizar mejor cómo funciona flex-grow, consideremos este ejemplo:
<div class="flex-container">
<div class="flex-item item1">1</div>
<div class="flex-item item2">2</div>
<div class="flex-item item3">3</div>
</div>
.flex-container {
display: flex;
height: 100px;
background-color: #f0f0f0;
}
.flex-item {
padding: 10px;
text-align: center;
background-color: #3498db;
color: white;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
flex-grow: 1;
}
En este ejemplo, el segundo elemento crecerá el doble que los otros dos, creando una distribución proporcional del espacio disponible.
La propiedad flex-grow es especialmente útil para crear diseños adaptables que se ajusten automáticamente al espacio disponible, lo que la convierte en una herramienta fundamental para el diseño web moderno y responsive.
Control de reducción con flex-shrink y cálculo de espacio
Mientras que flex-grow
controla cómo los elementos crecen cuando hay espacio extra disponible, flex-shrink determina cómo los elementos se reducen cuando no hay suficiente espacio en el contenedor flex. Esta propiedad es fundamental para crear diseños flexibles que se adapten correctamente cuando el espacio es limitado.
Por defecto, todos los elementos flex tienen un valor de flex-shrink: 1
, lo que significa que se reducirán de manera proporcional cuando sea necesario. A diferencia de flex-grow
, con flex-shrink
los elementos ya están dispuestos a encogerse por defecto.
Valores y comportamiento básico
La propiedad flex-shrink acepta un valor numérico no negativo:
.item {
flex-shrink: 1; /* Valor por defecto */
}
- flex-shrink: 0 - El elemento no se reducirá, manteniendo su tamaño base
- flex-shrink: 1 - El elemento se reducirá de forma proporcional cuando sea necesario
- flex-shrink: 2 - El elemento se reducirá el doble que un elemento con valor 1
Cómo se calcula la reducción
El cálculo de la reducción con flex-shrink es más complejo que con flex-grow, ya que tiene en cuenta tanto el factor de reducción como el tamaño base del elemento. Veamos un ejemplo:
.container {
display: flex;
width: 400px; /* Contenedor más pequeño que la suma de los elementos */
}
.item-1 {
flex-basis: 200px;
flex-shrink: 1;
}
.item-2 {
flex-basis: 200px;
flex-shrink: 2;
}
.item-3 {
flex-basis: 200px;
flex-shrink: 3;
}
En este ejemplo:
- El contenedor tiene 400px de ancho
- Los tres elementos tienen un tamaño base de 200px cada uno
- El espacio total necesario sería 600px (200px × 3)
- El déficit de espacio es 200px (600px - 400px)
Para calcular cuánto se reduce cada elemento:
- Multiplicamos cada
flex-basis
por suflex-shrink
:
- Item 1: 200px × 1 = 200
- Item 2: 200px × 2 = 400
- Item 3: 200px × 3 = 600
- Total: 1200
- Calculamos el factor de reducción para cada elemento:
- Item 1: (200 ÷ 1200) × 200px = 33.33px
- Item 2: (400 ÷ 1200) × 200px = 66.67px
- Item 3: (600 ÷ 1200) × 200px = 100px
- Tamaño final de cada elemento:
- Item 1: 200px - 33.33px = 166.67px
- Item 2: 200px - 66.67px = 133.33px
- Item 3: 200px - 100px = 100px
Ejemplos prácticos
Veamos algunos casos de uso comunes:
1. Evitar que un elemento se reduzca
.container {
display: flex;
}
.flexible-item {
flex-shrink: 1; /* Se reducirá cuando sea necesario */
}
.fixed-width-item {
flex-shrink: 0; /* No se reducirá */
width: 200px;
}
Este patrón es útil para elementos que deben mantener un tamaño constante, como logotipos o botones con un ancho específico.
2. Reducción proporcional en una barra de navegación
.navbar {
display: flex;
}
.brand {
flex-shrink: 0; /* El logo no se reduce */
}
.nav-link {
flex-shrink: 1; /* Enlaces se reducen por igual */
}
.search-box {
flex-shrink: 2; /* El buscador se reduce más rápido */
}
En este ejemplo, cuando el espacio es limitado, el buscador se reducirá primero, seguido por los enlaces de navegación, mientras que el logo mantendrá su tamaño.
3. Galería de imágenes adaptable
.gallery {
display: flex;
}
.main-image {
flex-basis: 500px;
flex-shrink: 1;
}
.thumbnail {
flex-basis: 100px;
flex-shrink: 2; /* Las miniaturas se reducen más rápido */
}
Comportamiento con diferentes tamaños base
El impacto de flex-shrink varía según el tamaño base de los elementos:
.container {
display: flex;
width: 500px;
}
.item-large {
flex-basis: 400px;
flex-shrink: 1;
}
.item-small {
flex-basis: 200px;
flex-shrink: 1;
}
Aunque ambos elementos tienen el mismo valor de flex-shrink: 1
, el elemento más grande (item-large
) se reducirá más en términos absolutos porque la reducción se calcula proporcionalmente al tamaño base.
Ejemplo visual con diferentes valores de flex-shrink
Para visualizar mejor cómo funciona flex-shrink, consideremos este ejemplo:
<div class="flex-container">
<div class="flex-item shrink-1">flex-shrink: 1</div>
<div class="flex-item shrink-2">flex-shrink: 2</div>
<div class="flex-item shrink-0">flex-shrink: 0</div>
</div>
.flex-container {
display: flex;
width: 100%;
max-width: 600px;
border: 2px solid #333;
}
.flex-item {
flex-basis: 250px; /* Cada elemento necesita 250px */
padding: 15px;
text-align: center;
}
.shrink-1 {
background-color: #3498db;
flex-shrink: 1;
}
.shrink-2 {
background-color: #e74c3c;
flex-shrink: 2;
}
.shrink-0 {
background-color: #2ecc71;
flex-shrink: 0;
}
En este ejemplo:
- El contenedor tiene un ancho máximo de 600px
- Los tres elementos tienen un tamaño base de 250px cada uno (750px en total)
- Cuando el contenedor se reduce, el elemento con
flex-shrink: 2
se reducirá el doble que el elemento conflex-shrink: 1
- El elemento con
flex-shrink: 0
mantendrá siempre sus 250px
Consideraciones importantes
- Si todos los elementos tienen
flex-shrink: 0
, pueden desbordar el contenedor cuando no hay suficiente espacio. - Los valores más altos de flex-shrink hacen que los elementos se reduzcan más rápidamente.
- La reducción se aplica después de considerar los márgenes, bordes y rellenos.
- flex-shrink solo tiene efecto cuando el tamaño total de los elementos es mayor que el tamaño del contenedor.
La propiedad flex-shrink es esencial para crear diseños que se adapten correctamente a diferentes tamaños de pantalla, especialmente cuando el espacio es limitado, como en dispositivos móviles o cuando la ventana del navegador se reduce.
Tamaño base con flex-basis y su relación con width/height
La propiedad flex-basis define el tamaño inicial de un elemento flex antes de que se apliquen las propiedades de crecimiento (flex-grow) o reducción (flex-shrink). Podemos considerarla como el "tamaño base" o "tamaño sugerido" para un elemento dentro de un contenedor flex.
Esta propiedad es fundamental para entender cómo se comportan los elementos flex, ya que establece el punto de partida desde el cual los elementos pueden crecer o reducirse.
Valores básicos de flex-basis
.item {
flex-basis: auto; /* Valor por defecto */
}
Los valores más comunes para flex-basis son:
- auto: Utiliza el tamaño intrínseco del elemento (width/height según el eje principal)
- Longitudes: Valores como
100px
,10rem
,50%
, etc. - content: Basa el tamaño en el contenido del elemento (poco soportado en navegadores)
- 0: Ignora el tamaño intrínseco y parte desde cero
Relación con width y height
La relación entre flex-basis y las propiedades width/height es uno de los aspectos más importantes (y a veces confusos) de Flexbox:
.container {
display: flex;
flex-direction: row; /* Dirección horizontal (por defecto) */
}
.item {
width: 200px;
flex-basis: 150px;
}
En este ejemplo, ¿qué tamaño tendrá el elemento? La respuesta depende de la dirección del eje principal:
- En flex-direction: row (horizontal), flex-basis tiene prioridad sobre width
- En flex-direction: column (vertical), flex-basis tiene prioridad sobre height
Veamos un ejemplo más claro:
.container {
display: flex; /* Por defecto, flex-direction: row */
}
.item {
width: 200px; /* Será ignorado si flex-basis no es auto */
flex-basis: 150px; /* Este valor prevalece */
}
En este caso, el elemento tendrá un tamaño inicial de 150px, no de 200px, porque flex-basis tiene prioridad en el eje principal.
Comportamiento según el eje principal
El comportamiento de flex-basis cambia según la dirección del eje principal:
/* Eje horizontal (row) */
.container-row {
display: flex;
flex-direction: row;
}
.item-row {
flex-basis: 200px; /* Afecta al ancho */
height: 100px; /* Se respeta normalmente */
}
/* Eje vertical (column) */
.container-column {
display: flex;
flex-direction: column;
}
.item-column {
flex-basis: 200px; /* Afecta a la altura */
width: 100px; /* Se respeta normalmente */
}
Ejemplo práctico: Galería de imágenes
Veamos un ejemplo práctico de cómo usar flex-basis para crear una galería de imágenes con diferentes tamaños base:
<div class="gallery">
<div class="image featured">Imagen destacada</div>
<div class="image">Imagen normal</div>
<div class="image">Imagen normal</div>
</div>
.gallery {
display: flex;
width: 100%;
gap: 10px;
}
.image {
flex-basis: 200px;
flex-grow: 1;
height: 150px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.featured {
flex-basis: 400px; /* La imagen destacada tiene un tamaño base mayor */
}
En este ejemplo, todas las imágenes tienen un tamaño base diferente, pero pueden crecer proporcionalmente gracias a flex-grow: 1
.
Flex-basis: auto vs width/height
Cuando flex-basis está establecido en auto
(su valor por defecto), el comportamiento es especial:
.item {
flex-basis: auto;
width: 200px;
}
Con flex-basis: auto
, el navegador mirará:
- Primero, si hay un width definido (en flex-direction: row) o height (en flex-direction: column)
- Si no hay dimensión definida, usará el tamaño del contenido
Este comportamiento hace que flex-basis: auto
sea muy útil para crear diseños flexibles que respeten las dimensiones explícitas cuando están definidas.
Flex-basis: 0 vs flex-basis: auto
La diferencia entre estos dos valores es crucial para entender Flexbox:
/* Con flex-basis: 0 */
.container-1 {
display: flex;
}
.item-1 {
flex-basis: 0;
flex-grow: 1;
}
/* Con flex-basis: auto */
.container-2 {
display: flex;
}
.item-2 {
flex-basis: auto; /* Respeta el contenido o width/height */
flex-grow: 1;
}
- Con
flex-basis: 0
, todos los elementos empiezan desde cero y crecen proporcionalmente según su valor de flex-grow, ignorando completamente su contenido o dimensiones. - Con
flex-basis: auto
, los elementos empiezan desde su tamaño intrínseco (contenido o width/height) y luego crecen proporcionalmente.
Ejemplo visual: Comparación de diferentes valores de flex-basis
<div class="flex-container">
<div class="flex-item basis-auto">flex-basis: auto</div>
<div class="flex-item basis-0">flex-basis: 0</div>
<div class="flex-item basis-200">flex-basis: 200px</div>
</div>
.flex-container {
display: flex;
width: 100%;
border: 2px solid #333;
margin-bottom: 20px;
}
.flex-item {
padding: 15px;
text-align: center;
flex-grow: 1;
}
.basis-auto {
background-color: #3498db;
flex-basis: auto;
/* Sin width definido, usará el tamaño del contenido */
}
.basis-0 {
background-color: #e74c3c;
flex-basis: 0;
/* Ignora el contenido y parte desde cero */
}
.basis-200 {
background-color: #2ecc71;
flex-basis: 200px;
/* Comienza con 200px exactos */
}
Casos de uso comunes
1. Columnas de igual ancho independientemente del contenido
.equal-columns {
display: flex;
}
.column {
flex-basis: 0;
flex-grow: 1;
}
Este patrón es perfecto para crear columnas que tengan exactamente el mismo ancho, sin importar cuánto contenido tenga cada una.
2. Elementos que respetan un tamaño mínimo
.container {
display: flex;
}
.item {
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 1;
}
Aquí, los elementos intentarán mantener al menos 200px de ancho, pero pueden crecer o reducirse según sea necesario.
3. Barra lateral con ancho fijo
.page-layout {
display: flex;
}
.sidebar {
flex-basis: 250px;
flex-shrink: 0; /* Evita que se reduzca */
}
.main-content {
flex-basis: 0;
flex-grow: 1;
}
Este patrón crea una barra lateral que mantiene su ancho mientras el contenido principal ocupa todo el espacio restante.
Consideraciones importantes
- flex-basis siempre se refiere a la dimensión en el eje principal (ancho en row, altura en column).
- Si un elemento tiene
flex-basis: 0
yflex-grow: 0
, su tamaño será 0 (invisible). - Los valores porcentuales de flex-basis se calculan respecto al tamaño del contenedor flex.
- Para un control completo, es recomendable establecer explícitamente flex-basis en lugar de confiar en el valor por defecto.
La propiedad flex-basis es esencial para crear diseños flexibles y predecibles, ya que establece el punto de partida desde el cual los elementos pueden adaptarse. Entender su relación con width y height te permitirá crear layouts más robustos y evitar comportamientos inesperados en tus diseños con Flexbox.
Shorthand flex y valores comunes (flex: 1, flex: auto, flex: none)
La propiedad flex es un atajo (shorthand) que combina las tres propiedades principales de los elementos flex: flex-grow, flex-shrink y flex-basis en una sola declaración. Esto nos permite definir el comportamiento completo de un elemento flex de manera concisa.
.item {
flex: flex-grow flex-shrink flex-basis;
}
Esta propiedad simplifica enormemente nuestro código CSS y nos ayuda a crear patrones de diseño comunes con muy pocas líneas de código.
Sintaxis básica
La sintaxis completa de la propiedad flex es:
.item {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
Todos los valores son opcionales, pero el orden es importante. Si omites algún valor, se aplicarán valores predeterminados específicos que veremos a continuación.
Valores predefinidos comunes
CSS define algunos valores predefinidos para la propiedad flex que cubren los casos de uso más frecuentes:
1. flex: 1 (el más utilizado)
.item {
flex: 1;
}
Esto es equivalente a:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
Este valor hace que el elemento:
- Crezca para ocupar el espacio disponible (
flex-grow: 1
) - Se reduzca cuando sea necesario (
flex-shrink: 1
) - Comience desde un tamaño base de 0 (
flex-basis: 0%
)
Es ideal para crear elementos que ocupen todo el espacio disponible por igual, ignorando su tamaño de contenido.
2. flex: auto
.item {
flex: auto;
}
Esto es equivalente a:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
Este valor hace que el elemento:
- Crezca para ocupar el espacio disponible
- Se reduzca cuando sea necesario
- Comience desde su tamaño intrínseco (contenido o width/height)
Es útil para crear elementos flexibles que respeten su contenido pero que también puedan crecer o reducirse.
3. flex: none
.item {
flex: none;
}
Esto es equivalente a:
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
Este valor hace que el elemento:
- No crezca (
flex-grow: 0
) - No se reduzca (
flex-shrink: 0
) - Mantenga su tamaño intrínseco (
flex-basis: auto
)
Es perfecto para crear elementos inflexibles que mantengan su tamaño original independientemente del espacio disponible.
4. flex: 0 auto o simplemente flex: initial
.item {
flex: initial;
}
Esto es equivalente a:
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
Este es el valor por defecto para los elementos flex. Hace que el elemento:
- No crezca más allá de su tamaño base
- Se reduzca si es necesario
- Comience desde su tamaño intrínseco
Ejemplos prácticos
Veamos algunos ejemplos prácticos de cómo usar estos valores predefinidos:
1. Barra de navegación con logo fijo y enlaces flexibles
<nav class="navbar">
<div class="logo">Logo</div>
<div class="links">
<a href="#">Inicio</a>
<a href="#">Productos</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</div>
<div class="user-menu">Usuario</div>
</nav>
.navbar {
display: flex;
width: 100%;
}
.logo {
flex: none; /* No crece ni se reduce */
padding: 10px;
}
.links {
flex: 1; /* Ocupa todo el espacio disponible */
display: flex;
justify-content: space-around;
}
.user-menu {
flex: none; /* No crece ni se reduce */
padding: 10px;
}
2. Diseño de tres columnas con diferentes comportamientos
<div class="layout">
<aside class="sidebar-left">Sidebar izquierdo</aside>
<main class="content">Contenido principal</main>
<aside class="sidebar-right">Sidebar derecho</aside>
</div>
.layout {
display: flex;
height: 100vh;
}
.sidebar-left {
flex: none; /* Ancho fijo, no flexible */
width: 200px;
background-color: #f0f0f0;
}
.content {
flex: 1; /* Ocupa todo el espacio disponible */
background-color: #ffffff;
padding: 20px;
}
.sidebar-right {
flex: 0 0 300px; /* No crece, no se reduce, 300px de ancho */
background-color: #f0f0f0;
}
3. Galería de tarjetas adaptables
<div class="card-gallery">
<div class="card">Tarjeta 1</div>
<div class="card">Tarjeta 2</div>
<div class="card">Tarjeta con más contenido</div>
<div class="card">Tarjeta 4</div>
</div>
.card-gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* Puede crecer, puede reducirse, base de 300px */
min-height: 200px;
background-color: #3498db;
color: white;
padding: 20px;
}
Valores numéricos personalizados
Además de los valores predefinidos, podemos especificar valores numéricos personalizados:
.item-1 {
flex: 2 1 400px;
/* flex-grow: 2, flex-shrink: 1, flex-basis: 400px */
}
.item-2 {
flex: 1 0 200px;
/* flex-grow: 1, flex-shrink: 0, flex-basis: 200px */
}
Valores abreviados
También podemos usar formas abreviadas con uno o dos valores:
Con un solo valor numérico (flex-grow):
.item {
flex: 2; /* flex-grow: 2, flex-shrink: 1, flex-basis: 0% */
}
Con un valor de longitud o porcentaje (flex-basis):
.item {
flex: 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}
Con dos valores (flex-grow y flex-shrink):
.item {
flex: 2 0; /* flex-grow: 2, flex-shrink: 0, flex-basis: 0% */
}
Con dos valores (flex-grow y flex-basis):
.item {
flex: 2 200px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 200px */
}
Ejemplo visual comparativo
Para entender mejor las diferencias entre los valores comunes, veamos un ejemplo visual:
<div class="container">
<div class="flex-demo">
<div class="item flex-1">flex: 1</div>
<div class="item flex-auto">flex: auto</div>
<div class="item flex-none">flex: none</div>
<div class="item flex-initial">flex: initial</div>
</div>
</div>
.flex-demo {
display: flex;
width: 100%;
border: 2px solid #333;
margin-bottom: 20px;
}
.item {
padding: 15px;
text-align: center;
background-color: #3498db;
margin: 5px;
}
.flex-1 {
flex: 1;
background-color: #3498db;
}
.flex-auto {
flex: auto;
background-color: #e74c3c;
}
.flex-none {
flex: none;
background-color: #2ecc71;
}
.flex-initial {
flex: initial;
background-color: #f39c12;
}
Consideraciones importantes
- La propiedad flex reestablece los valores omitidos a sus valores iniciales específicos, que pueden ser diferentes de los valores por defecto de las propiedades individuales.
- Usar la propiedad flex es generalmente preferible a establecer las propiedades individuales, ya que garantiza que se establezcan todos los valores necesarios.
- El valor
flex: 1
es probablemente el más utilizado en diseños flexbox, ya que crea elementos que se distribuyen equitativamente. - Para elementos que no deben cambiar de tamaño,
flex: none
es la opción más segura.
La propiedad flex es una herramienta poderosa que simplifica enormemente la creación de diseños flexibles. Dominar los valores comunes como flex: 1
, flex: auto
y flex: none
te permitirá crear rápidamente layouts adaptables con muy pocas líneas de código.
Shorthand flex y valores comunes (flex: 1, flex: auto, flex: none)
La propiedad shorthand flex es una forma abreviada y potente de controlar simultáneamente las tres propiedades principales de los elementos flexibles: flex-grow
, flex-shrink
y flex-basis
. Esta sintaxis condensada nos permite definir el comportamiento completo de un elemento flex con una sola declaración, lo que hace nuestro código más limpio y mantenible.
La sintaxis básica de esta propiedad es:
.item {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
Aunque puedes especificar los tres valores, CSS también ofrece algunos valores predefinidos que cubren los patrones de diseño más comunes y que simplifican enormemente nuestro trabajo.
Valores predefinidos más utilizados
El valor flex: 1
.item {
flex: 1;
}
Este valor es probablemente el más utilizado en diseños flexbox. Cuando aplicamos flex: 1
a un elemento, estamos estableciendo:
.item {
flex-grow: 1; /* Puede crecer */
flex-shrink: 1; /* Puede reducirse */
flex-basis: 0%; /* Comienza desde cero */
}
Este valor hace que los elementos:
- Ignoren su tamaño inicial
- Ocupen todo el espacio disponible de forma equitativa
- Se reduzcan proporcionalmente cuando no hay suficiente espacio
Es perfecto para crear distribuciones equitativas como menús de navegación, galerías o columnas de igual ancho:
.equal-columns {
display: flex;
}
.column {
flex: 1;
padding: 20px;
}
El valor flex: auto
.item {
flex: auto;
}
Este valor es similar a flex: 1
, pero con una diferencia crucial en el tamaño base:
.item {
flex-grow: 1; /* Puede crecer */
flex-shrink: 1; /* Puede reducirse */
flex-basis: auto; /* Comienza desde su tamaño intrínseco */
}
Con flex: auto
, los elementos:
- Comienzan con su tamaño de contenido natural
- Crecen para ocupar el espacio disponible
- Se reducen cuando es necesario
La diferencia clave con flex: 1
es que los elementos con más contenido obtendrán inicialmente más espacio:
.content-aware {
display: flex;
}
.item {
flex: auto;
padding: 10px;
}
El valor flex: none
.item {
flex: none;
}
Este valor crea elementos completamente inflexibles:
.item {
flex-grow: 0; /* No crece */
flex-shrink: 0; /* No se reduce */
flex-basis: auto; /* Mantiene su tamaño intrínseco */
}
Con flex: none
, los elementos:
- Mantienen su tamaño exacto basado en su contenido o dimensiones explícitas
- No crecen aunque haya espacio disponible
- No se reducen aunque falte espacio (pueden causar desbordamiento)
Es ideal para elementos que deben mantener dimensiones fijas, como logotipos, iconos o botones con un tamaño específico:
.toolbar {
display: flex;
}
.logo {
flex: none;
width: 100px;
}
.spacer {
flex: 1;
}
.action-button {
flex: none;
width: 80px;
}
El valor flex: initial (o flex: 0 auto)
.item {
flex: initial;
}
Este es el valor por defecto para los elementos flex:
.item {
flex-grow: 0; /* No crece */
flex-shrink: 1; /* Puede reducirse */
flex-basis: auto; /* Comienza desde su tamaño intrínseco */
}
Con flex: initial
, los elementos:
- Mantienen su tamaño basado en su contenido
- No crecen aunque haya espacio disponible
- Se reducen si es necesario para evitar desbordamiento
Es útil para elementos que deben mantener su tamaño natural pero pueden comprimirse si el espacio es limitado:
.navbar {
display: flex;
}
.nav-item {
flex: initial;
padding: 10px 15px;
}
Ejemplos prácticos con valores comunes
Veamos algunos ejemplos prácticos que muestran cómo estos valores predefinidos resuelven problemas de diseño comunes:
1. Diseño de aplicación con barra lateral y contenido principal
<div class="app-layout">
<nav class="sidebar">Navegación</nav>
<main class="content">Contenido principal</main>
</div>
.app-layout {
display: flex;
height: 100vh;
}
.sidebar {
flex: none; /* No crece ni se reduce */
width: 250px;
background-color: #f0f0f0;
}
.content {
flex: 1; /* Ocupa todo el espacio restante */
padding: 20px;
overflow: auto;
}
2. Barra de herramientas con elementos de diferentes comportamientos
<div class="toolbar">
<div class="tool-group">
<button>Cortar</button>
<button>Copiar</button>
<button>Pegar</button>
</div>
<div class="spacer"></div>
<div class="search">
<input type="text" placeholder="Buscar...">
</div>
</div>
.toolbar {
display: flex;
padding: 10px;
background-color: #f5f5f5;
}
.tool-group {
flex: none; /* Mantiene su tamaño exacto */
display: flex;
gap: 5px;
}
.spacer {
flex: 1; /* Ocupa todo el espacio disponible */
}
.search {
flex: auto; /* Crece pero respeta su contenido */
max-width: 300px;
}
3. Tarjetas de producto con diferentes comportamientos
<div class="product-grid">
<div class="product featured">Producto destacado</div>
<div class="product">Producto normal</div>
<div class="product">Producto normal</div>
<div class="product">Producto normal</div>
</div>
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.product {
flex: 1 1 300px; /* Puede crecer, puede reducirse, base 300px */
min-height: 200px;
padding: 15px;
background-color: #e0e0e0;
}
.featured {
flex: 2 1 400px; /* Crece el doble, puede reducirse, base 400px */
background-color: #d0d0f0;
}
Valores numéricos personalizados
Además de los valores predefinidos, podemos crear combinaciones personalizadas para casos específicos:
.item-1 {
flex: 2 0 200px;
/* Crece el doble que otros elementos, no se reduce, comienza con 200px */
}
.item-2 {
flex: 0 2 auto;
/* No crece, se reduce el doble que otros elementos, tamaño base automático */
}
Formas abreviadas con menos valores
La propiedad flex también permite formas abreviadas con uno o dos valores:
Con un valor numérico (solo flex-grow):
.item {
flex: 2;
/* Equivale a: flex-grow: 2; flex-shrink: 1; flex-basis: 0%; */
}
Con un valor de longitud o porcentaje (solo flex-basis):
.item {
flex: 300px;
/* Equivale a: flex-grow: 1; flex-shrink: 1; flex-basis: 300px; */
}
Con dos valores (flex-grow y flex-basis):
.item {
flex: 2 200px;
/* Equivale a: flex-grow: 2; flex-shrink: 1; flex-basis: 200px; */
}
Con dos valores (flex-grow y flex-shrink):
.item {
flex: 2 3;
/* Equivale a: flex-grow: 2; flex-shrink: 3; flex-basis: 0%; */
}
Comparación visual de los valores comunes
Para entender mejor las diferencias entre los valores predefinidos, veamos un ejemplo comparativo:
<div class="comparison">
<div class="flex-container">
<div class="item flex-1">flex: 1</div>
<div class="item flex-1">flex: 1</div>
<div class="item flex-1">flex: 1</div>
</div>
<div class="flex-container">
<div class="item flex-auto">flex: auto (poco texto)</div>
<div class="item flex-auto">flex: auto (con mucho más contenido para mostrar)</div>
<div class="item flex-auto">flex: auto (texto medio)</div>
</div>
<div class="flex-container">
<div class="item flex-none">flex: none</div>
<div class="item flex-1">flex: 1</div>
<div class="item flex-initial">flex: initial</div>
</div>
</div>
.comparison {
display: flex;
flex-direction: column;
gap: 20px;
}
.flex-container {
display: flex;
border: 1px solid #ccc;
padding: 10px;
}
.item {
padding: 10px;
text-align: center;
border-radius: 4px;
}
.flex-1 {
flex: 1;
background-color: #e3f2fd;
}
.flex-auto {
flex: auto;
background-color: #ffebee;
}
.flex-none {
flex: none;
background-color: #e8f5e9;
width: 100px;
}
.flex-initial {
flex: initial;
background-color: #fff8e1;
}
Consejos prácticos para elegir el valor adecuado
- Usa flex: 1 cuando quieras que los elementos ocupen todo el espacio disponible por igual, independientemente de su contenido.
- Usa flex: auto cuando quieras que los elementos se distribuyan según su contenido pero también ocupen el espacio disponible.
- Usa flex: none para elementos que deben mantener un tamaño exacto, como logotipos o botones con dimensiones específicas.
- Usa flex: initial (o no especifiques nada) para elementos que deben mantener su tamaño natural pero pueden reducirse si es necesario.
- Para casos más específicos, usa la sintaxis completa con los tres valores.
Consideraciones importantes
- La propiedad flex reestablece los valores omitidos a sus valores iniciales específicos, que pueden ser diferentes de los valores predeterminados de las propiedades individuales.
- Es recomendable usar la propiedad flex en lugar de las propiedades individuales para garantizar un comportamiento consistente.
- Los valores como
flex: 1
son muy útiles para crear diseños responsivos que se adapten a diferentes tamaños de pantalla. - Recuerda que
flex: 0 0 auto
es equivalente aflex: none
, y ambos crean elementos completamente inflexibles.
La propiedad shorthand flex es una herramienta esencial en el diseño moderno con CSS. Dominar estos valores comunes te permitirá crear layouts flexibles y responsivos con muy pocas líneas de código, ahorrando tiempo y reduciendo la complejidad de tu CSS.
Ejercicios de esta lección Propiedades de los Items Flex
Evalúa tus conocimientos de esta lección Propiedades de los Items Flex con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
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
Entorno Para Desarrollar 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
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
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
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
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
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender cómo funciona la propiedad flex-grow para controlar el crecimiento proporcional de los elementos flex.
- Entender el funcionamiento de flex-shrink para gestionar la reducción proporcional cuando el espacio es limitado.
- Aprender el papel de flex-basis como tamaño base inicial y su relación con width y height.
- Conocer la sintaxis y valores comunes de la propiedad shorthand flex para simplificar el control de flex-grow, flex-shrink y flex-basis.
- Aplicar patrones prácticos para crear diseños flexibles y adaptables usando estas propiedades.