FLEXBOX EN CSS
Flexbox, o el Módulo de Caja Flexible, es un modelo de diseño en CSS que permite diseñar
y organizar elementos en una página web de manera eficiente y flexible. Con Flexbox, puedes
controlar la distribución del espacio entre los ítems de una interfaz y mejorar las capacidades de
alineació. Es especialmente útil para:
• Alinear elementos horizontal y verticalmente.
• Distribuir espacio entre elementos de manera uniforme.
• Cambiar el orden de visualización de los elementos sin alterar el HTML.
• Crear diseños responsivos que se adaptan a diferentes tamaños de pantalla.
• Flexbox maneja el layout en una sola dimensión a la vez, ya sea como fila o como columna,
lo que lo diferencia del Grid Layout que es bidimensional.
En Flexbox, hay propiedades específicas que se aplican al contenedor padre (flex container)
y otras que se aplican a los elementos hijos (flex items). Aquí te detallo algunas de ellas:
Propiedades del contenedor padre:
• display: Establece el elemento como un contenedor flex. Puede ser flex o inline-flex.
• flex-direction: Define la dirección principal del eje en el contenedor, puede ser row, row-
reverse, column, o column-reverse.
• flex-wrap: Controla si los elementos hijos se deben envolver o no cuando no hay suficiente
espacio, con valores como nowrap, wrap, o wrap-reverse.
• justify-content: Alinea los elementos hijos en el eje principal y puede tomar valores como
flex-start, flex-end, center, space-between, space-around, o space-evenly.
• align-items: Alinea los elementos hijos en el eje transversal y puede ser flex-start, flex-end,
center, baseline, o stretch.
• align-content: Alinea las líneas de elementos dentro del contenedor cuando hay espacio
extra en el eje transversal. Los valores son similares a justify-content.
Propiedades de los elementos hijos:
• flex: Es una propiedad abreviada para flex-grow, flex-shrink, y flex-basis.
• flex-grow: Define la capacidad de un elemento para crecer si es necesario.
• flex-shrink: Define la capacidad de un elemento para encogerse si es necesario.
• flex-basis: Define el tamaño inicial de un elemento antes de la distribución del espacio
restante.
• align-self: Permite a un elemento hijo tener una alineación individual en el eje transversal,
que puede anular la align-items del contenedor.
• order: Permite cambiar el orden en el que aparecen los elementos hijos en el contenedor.
Estas son solo algunas de las propiedades que puedes utilizar en Flexbox para crear diseños
responsivos y flexibles
Flexbox, o el Módulo de Caja Flexible, es un modelo de diseño en CSS que permite diseñar
y organizar elementos en una página web de manera eficiente y flexible. Con Flexbox, puedes
controlar la distribución del espacio entre los ítems de una interfaz y mejorar las capacidades de
alineació. Es especialmente útil para:
• Alinear elementos horizontal y verticalmente.
• Distribuir espacio entre elementos de manera uniforme.
• Cambiar el orden de visualización de los elementos sin alterar el HTML.
• Crear diseños responsivos que se adaptan a diferentes tamaños de pantalla.
• Flexbox maneja el layout en una sola dimensión a la vez, ya sea como fila o como columna,
lo que lo diferencia del Grid Layout que es bidimensional.
En Flexbox, hay propiedades específicas que se aplican al contenedor padre (flex container)
y otras que se aplican a los elementos hijos (flex items). Aquí te detallo algunas de ellas:
Propiedades del contenedor padre:
• display: Establece el elemento como un contenedor flex. Puede ser flex o inline-flex.
• flex-direction: Define la dirección principal del eje en el contenedor, puede ser row, row-
reverse, column, o column-reverse.
• flex-wrap: Controla si los elementos hijos se deben envolver o no cuando no hay suficiente
espacio, con valores como nowrap, wrap, o wrap-reverse.
• justify-content: Alinea los elementos hijos en el eje principal y puede tomar valores como
flex-start, flex-end, center, space-between, space-around, o space-evenly.
• align-items: Alinea los elementos hijos en el eje transversal y puede ser flex-start, flex-end,
center, baseline, o stretch.
• align-content: Alinea las líneas de elementos dentro del contenedor cuando hay espacio
extra en el eje transversal. Los valores son similares a justify-content.
Propiedades de los elementos hijos:
• flex: Es una propiedad abreviada para flex-grow, flex-shrink, y flex-basis.
• flex-grow: Define la capacidad de un elemento para crecer si es necesario.
• flex-shrink: Define la capacidad de un elemento para encogerse si es necesario.
• flex-basis: Define el tamaño inicial de un elemento antes de la distribución del espacio
restante.
• align-self: Permite a un elemento hijo tener una alineación individual en el eje transversal,
que puede anular la align-items del contenedor.
• order: Permite cambiar el orden en el que aparecen los elementos hijos en el contenedor.
Estas son solo algunas de las propiedades que puedes utilizar en Flexbox para crear diseños
responsivos y flexibles
