Fundamentos de Flexbox en CSS

• Flexbox es un modelo de diseño CSS unidimensional usado para organizar elementos en filas o columnas.
• Facilita la creación de diseños flexibles y adaptables, optimizados para diferentes tamaños de pantalla y dispositivos.
• Simplifica la alineación y distribución del espacio entre los elementos dentro de un contenedor.

Contenedor Flex (Flex Container)

• Se crea aplicando display: flex; o display: inline-flex; a un elemento.
• Convierte a los hijos directos de ese elemento en "flex items".
• display: flex; genera un contenedor de nivel bloque.
• display: inline-flex; genera un contenedor de nivel en línea.

Eje Principal (Main Axis)

• Eje principal a lo largo del cual se disponen los flex items.
• La dirección del eje principal se define con la propiedad flex-direction.

Eje Cruzado (Cross Axis)

• Eje perpendicular al eje principal.
• Se usa para alinear los flex items perpendicularmente al eje principal.

Propiedades del Contenedor Flex

• Estas propiedades se aplican al contenedor flex, afectando a sus flex items.

flex-direction

• Define la dirección del eje principal, determinando la dirección en la que se colocan los flex items.
• Valores:
  • row (valor por defecto): Eje principal horizontal, de izquierda a derecha.
  • row-reverse: Eje principal horizontal, de derecha a izquierda.
  • column: Eje principal vertical, de arriba a abajo.
  • column-reverse: Eje principal vertical, de abajo a arriba.

flex-wrap

• Controla si los flex items deben colocarse en una sola línea o en varias líneas.
• Valores:
  • nowrap (valor por defecto): Todos los flex items se colocan en una sola línea. El contenedor puede desbordarse.
  • wrap: Los flex items se envuelven en varias líneas si no caben en una sola.
  • wrap-reverse: Similar a wrap, pero el orden de las líneas se invierte.

flex-flow

• Propiedad abreviada para flex-direction y flex-wrap.
• Ejemplo: flex-flow: row wrap;

justify-content

• Define cómo se distribuyen los flex items a lo largo del eje principal.
• Ayuda a alinear los items cuando no utilizan todo el espacio disponible en el eje principal.
• Valores:
  • flex-start (valor por defecto): Los items se agrupan al inicio del eje principal.
  • flex-end: Los items se agrupan al final del eje principal.
  • center: Los items se centran a lo largo del eje principal.
  • space-between: Los items se distribuyen uniformemente a lo largo del eje principal; el primer item se alinea al inicio y el último al final.
  • space-around: Los items se distribuyen uniformemente a lo largo del eje principal, con un espacio igual alrededor de cada item.
  • space-evenly: Los items se distribuyen de manera que el espacio entre dos items cualesquiera (y el espacio hasta los bordes) sea igual.

align-items

• Define cómo se alinean los flex items a lo largo del eje cruzado.
• Valores:
  • stretch (valor por defecto): Los items se estiran para llenar el contenedor a lo largo del eje cruzado.
  • flex-start: Los items se alinean al inicio del eje cruzado.
  • flex-end: Los items se alinean al final del eje cruzado.
  • center: Los items se centran a lo largo del eje cruzado.
  • baseline: Los items se alinean según su línea de base.

align-content

• Define cómo se distribuyen las líneas de flex items cuando hay varias líneas (cuando flex-wrap está establecido en wrap o wrap-reverse).
• Similar a justify-content, pero para el eje cruzado.
• Valores:
  • stretch (valor por defecto): Las líneas se estiran para llenar el contenedor a lo largo del eje cruzado.
  • flex-start: Las líneas se agrupan al inicio del eje cruzado.
  • flex-end: Las líneas se agrupan al final del eje cruzado.
  • center: Las líneas se centran a lo largo del eje cruzado.
  • space-between: Las líneas se distribuyen uniformemente; la primera línea se alinea al inicio y la última al final.
  • space-around: Las líneas se distribuyen uniformemente, con un espacio igual alrededor de cada línea.
  • space-evenly: Las líneas se distribuyen de manera que el espacio entre dos líneas cualesquiera (y el espacio hasta los bordes) sea igual.

Propiedades de los Flex Items

• Estas propiedades se aplican a los hijos directos del contenedor flex (los flex items).

order

• Define el orden en que se muestran los flex items.
• Por defecto, todos los items tienen un order de 0.
• Items con valores order más bajos se mostrarán primero.
• Puede ser un valor positivo o negativo.

flex-grow

• Define la capacidad de un flex item para crecer si hay espacio disponible en el contenedor.
• Un valor de 0 (valor por defecto) impide que el item crezca.
• Un valor mayor permite que el item crezca, ocupando una proporción del espacio disponible.
• El espacio disponible se distribuye proporcionalmente entre los items según sus valores flex-grow.

flex-shrink

• Define la capacidad de un flex item para disminuir de tamaño si el contenedor no tiene suficiente espacio.
• Un valor de 1 (valor por defecto) permite que el item se contraiga (encoger).
• Un valor de 0 impide que el item se contraiga.
• La cantidad en que cada item se contrae depende de su valor flex-shrink en relación con los demás items.

flex-basis

• Define el tamaño inicial de un flex item antes de que se distribuya el espacio restante.
• Valores:
  • auto (valor por defecto): El tamaño se basa en el contenido del item.
  • content: El tamaño se basa en el contenido del item. Algunos navegadores no lo implementan consistentemente.
  • Un valor de longitud (ej., 100px, 50%): Define un tamaño específico.

flex

• Propiedad abreviada para flex-grow, flex-shrink y flex-basis.
• Se recomienda usar esta propiedad abreviada para mayor control.
• Valores comunes:
  • flex: 0 1 auto; (valor inicial)
  • flex: 1; (equivalente a flex: 1 1 0;): El item puede crecer y contraerse, con un tamaño inicial de 0. Se utiliza para distribuir el espacio equitativamente.
  • flex: 2;: El item crecerá el doble que los flex items con flex: 1.
  • flex: auto; (equivalente a flex: 1 1 auto;): El item puede crecer y contraerse, el tamaño inicial se basa en el contenido.
  • flex: none; (equivalente a flex: 0 0 auto;): El item no crece ni se contrae, el tamaño inicial se basa en el contenido.

align-self

• Permite anular la alineación definida por align-items para un flex item específico.
• Valores:
  • auto (valor por defecto): El item hereda el valor de align-items del contenedor.
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline