Flexbox revolucionó el diseño CSS al proporcionar un sistema eficiente para distribuir espacio y alinear elementos. Esta guía para principiantes cubre todos los fundamentos con ejemplos claros y prácticos.
Diagrama mostrando las propiedades principales de Flexbox
Contenido del Artículo
Conceptos básicos
Flexbox trabaja con un contenedor flex y sus hijos flexibles:
Contenedor Flex
Elemento padre con <code>display: flex</code>
Items Flex
Elementos hijos directos del contenedor
Eje Principal
Dirección definida por <code>flex-direction</code>
Eje Transversal
Eje perpendicular al principal
.contenedor-flex {
display: flex; /* Activa flexbox */
flex-direction: row; /* Dirección del eje principal */
justify-content: center; /* Alineación en eje principal */
align-items: center; /* Alineación en eje transversal */
gap: 20px; /* Espacio entre items */
}
Propiedades del contenedor
Las principales propiedades para controlar el layout:
.contenedor-avanzado {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 15px;
}gap es una propiedad relativamente nueva que simplifica el espaciado entre items flex.
| Propiedad | Valores comunes | Descripción |
|---|---|---|
| flex-direction | row, column, row-reverse, column-reverse | Dirección del eje principal |
| justify-content | flex-start, center, flex-end, space-between, space-around | Alineación en eje principal |
| align-items | stretch, flex-start, center, flex-end, baseline | Alineación en eje transversal |
| flex-wrap | nowrap, wrap, wrap-reverse | Control de multilínea |
| gap | 10px, 1rem, etc. | Espacio entre items |
Propiedades de los items
Propiedades para controlar items individuales:
.item-flex {
flex-grow: 1; /* Capacidad de crecer */
flex-shrink: 1; /* Capacidad de encoger */
flex-basis: 200px; /* Tamaño base */
align-self: center; /* Alineación individual */
order: 2; /* Orden visual (no afecta DOM) */
}
/* Atajo común */
.item-flex {
flex: 1 1 auto; /* grow, shrink, basis */
}
Ejemplos prácticos
Casos comunes resueltos con Flexbox:
/* Centrado perfecto */
.centrado-flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Menú horizontal */
.menu {
display: flex;
gap: 20px;
}
/* Tarjetas responsivas */
.contenedor-tarjetas {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.tarjeta {
flex: 1 1 300px; /* Crece, encoge, base de 300px */
}Flexbox es ideal para diseños responsivos ya que los items se ajustan automáticamente al espacio disponible.
