Hoja de referencia de diseño CSS Flexbox

El modelo de diseño Flexbox (Caja Flexible) proporciona una forma más eficiente de alinear y distribuir elementos dentro de un contenedor, incluso cuando su tamaño es desconocido o dinámico.

Contenedor Flex

Set on parent: display: flex; or display: inline-flex;

Propiedad	Descripción	Valores Comunes
`flex-direction`	Dirección del eje principal	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Si se debe envolver	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Abreviatura de dirección y envoltura	`row wrap`
`justify-content`	Alineación en el eje principal	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	Alineación en el eje transversal	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	Alineación de varias líneas en el eje transversal	`flex-start`, `flex-end`, `center`, `space-between`, `stretch`

Elementos Flex

Set on children:

Propiedad	Descripción	Por Defecto
`order`	Orden de colocación (valores menores primero)	`0`
`flex-grow`	Proporción de crecimiento (cuando hay espacio)	`0`
`flex-shrink`	Proporción de encogimiento (cuando falta espacio)	`1`
`flex-basis`	Tamaño base antes de distribuir el espacio	`auto`
`flex`	Abreviatura de grow, shrink y basis	`0 1 auto`
`align-self`	Permite una alineación diferente para un solo elemento	`auto`

Conceptos Clave

Eje Principal (Main Axis): Horizontal por defecto, definido por flex-direction.
Eje Transversal (Cross Axis): La dirección perpendicular al eje principal.

Ejemplos de Escenarios

Centrado horizontal y vertical

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Distribución de ancho igual

.item {
  flex: 1; /* Ocupar el espacio restante uniformemente */
}

Alineación en los extremos (Space Between)

.navbar {
  display: flex;
  justify-content: space-between;
}