Flexbox se construye sobre dos componentes clave: el Contenedor Flex (Flex Container) y los Elementos Flex (Flex Items). Comprender sus roles y cómo interactúan es esencial para dominar Flexbox.

Contenedor Flex (Flex Container)

El contenedor Flex es el elemento padre que contiene y organiza a los elementos Flex. Para crear un contenedor Flex, necesitamos aplicar la propiedad display con los valores flex o inline-flex a un elemento.

css

El display: flex; hace que el contenedor se comporte como un bloque a nivel de contenedor flex, mientras que display: inline-flex; hace que el contenedor flex se comporte como un contenedor flex inline.

Ejemplo de Contenedor Flex

html

css

[Placeholder: Imagen de un contenedor flex con tres elementos dentro, distribuidos horizontalmente y con espacios entre ellos]

Elementos Flex (Flex Items)

Los elementos Flex son los hijos directos del contenedor Flex. Estos elementos se organizan dentro del contenedor de acuerdo a las reglas definidas por Flexbox.

Ejemplo de Elementos Flex

Continuando con el ejemplo anterior, los elementos flex son los div que están dentro del contenedor flex-container.

html

En este caso, flex-container es el contenedor Flex y cada flex-item es un elemento Flex.

Propiedades Aplicables al Contenedor Flex

Estas son algunas de las propiedades clave aplicables al contenedor Flex que definen cómo se disponen los elementos Flex:

1. flex-direction: Define la dirección del eje principal.
2. flex-wrap: Permite que los elementos Flex se envuelvan en múltiples líneas.
3. justify-content: Alinea los elementos Flex a lo largo del eje principal.
4. align-items: Alinea los elementos Flex a lo largo del eje cruzado.
5. align-content: Alinea las líneas de elementos Flex en el eje cruzado cuando hay espacio extra en el contenedor.

Ejemplo de uso de Propiedades del Contenedor Flex

css

Propiedades Aplicables a los Elementos Flex

Estas son algunas de las propiedades clave aplicables a los elementos Flex:

1. order: Cambia el orden de los elementos Flex.
2. flex-grow: Permite que los elementos Flex crezcan si es necesario.
3. flex-shrink: Permite que los elementos Flex se encojan si es necesario.
4. flex-basis: Define la base flexible (tamaño inicial) de un elemento.
5. flex: Es una abreviatura para flex-grow, flex-shrink y flex-basis.
6. align-self: Permite modificar la alineación de un único elemento Flex a lo largo del eje cruzado.

Ejemplo de uso de Propiedades de los Elementos Flex

css

Ejemplo Completo

html

[Placeholder: Imagen que muestra el contenedor flex con tres elementos con diferentes configuraciones de order y flex-grow, distribuidos de manera que ilustran cómo se afectan entre sí]

La configuración del contenedor Flex y sus elementos te permite crear diseños extremadamente flexibles y adaptables. A medida que avanzamos, exploraremos estas propiedades en más detalle para que puedas aprovechar al máximo Flexbox en tus proyectos.