Flexbox Preview
Generated CSS
CSS Flexbox es un modelo de layout unidimensional que da herramientas poderosas para distribuir espacio y alinear elementos dentro de un contenedor. Es ideal para barras de navegación, grupos de botones, tarjetas en fila y cualquier componente que necesite alineación flexible.
.container {
display: flex;
flex-direction: row; /* row | column | row-reverse | column-reverse */
justify-content: center; /* distribución en eje principal */
align-items: center; /* alineación en eje cruzado */
flex-wrap: wrap; /* permite salto de línea */
gap: 16px;
}
.item {
flex: 1; /* crece para llenar espacio disponible */
flex-shrink: 0; /* no se encoge */
align-self: flex-end; /* alineación individual */
order: 2; /* reordena visualmente sin cambiar el DOM */
}
justify-content controla el eje principal (horizontal si flex-direction es row). align-items controla el eje cruzado (vertical si flex-direction es row).
Aplica al contenedor: display: flex; justify-content: center; align-items: center;. Esto centra el contenido horizontal y verticalmente.