Recursos de HTML, CSS y JS

Curso de HTML y CSS en el canal de YouTube: TodoCode

Flexbox (Flexible Box Layout) es un modelo de diseño en CSS que permite distribuir espacio y alinear elementos dentro de un contenedor, incluso cuando su tamaño es dinámico. Se activa estableciendo la propiedad display: flex en el elemento contenedor. A partir de ahí, los elementos hijos se convierten en elementos flexibles y se pueden alinear y distribuir fácilmente tanto en el eje horizontal (principal) como en el eje vertical (cruzado).

El eje principal por defecto es horizontal (de izquierda a derecha), pero se puede cambiar con flex-direction. Por ejemplo, flex-direction: column establece el eje principal en vertical. Con justify-content, se controla la distribución de los elementos en el eje principal (center, space-between, space-around, etc.), mientras que align-items y align-content controlan la alineación en el eje cruzado.

Cada elemento hijo también puede tener propiedades específicas, como flex-grow, flex-shrink y flex-basis, que determinan cómo se ajustan su tamaño dentro del contenedor. También existe el atajo flex, que combina esas tres propiedades.

Flexbox es ideal para crear diseños responsivos y adaptativos sin necesidad de usar flotantes o posicionamiento complicado. Facilita el alineamiento de elementos, incluso con dimensiones desconocidas o variadas.

Se agregarán más recursos próximamente...