Flexbox teoria

 **Flexbox** es un modelo de diseño en CSS que te permite crear layouts complejos y dinámicos de manera más sencilla y eficiente. Está diseñado para distribuir el espacio dentro de un contenedor y para alinear los elementos dentro de este contenedor. A continuación, te explico en detalle cómo funciona Flexbox y qué atributos se utilizan en el contenedor y en los elementos.

### 1. **Conceptos Básicos**

Flexbox opera en dos ejes principales:

- **Eje principal (Main Axis)**: Es el eje en el que los elementos flexibles son colocados. Por defecto, es horizontal.

- **Eje transversal (Cross Axis)**: Es perpendicular al eje principal. Por defecto, es vertical.

El contenedor de Flexbox se define utilizando la propiedad `display: flex;`. Una vez que un contenedor se convierte en un contenedor flex, sus elementos hijos se alinean automáticamente según las reglas de Flexbox.

### 2. **Atributos que se usan solo en el contenedor (Contenedor Flex)**

Estos atributos se aplican directamente al contenedor, afectando la disposición de sus elementos hijos:

- **`display: flex;`**: Define el contenedor como un contenedor Flexbox.

  

- **`flex-direction`**: Define la dirección del eje principal y cómo se alinean los elementos hijos en él.

  - Valores: `row` (predeterminado), `row-reverse`, `column`, `column-reverse`.

- **`flex-wrap`**: Controla si los elementos hijos deben ajustarse a una nueva línea si no caben en una sola fila/columna.

  - Valores: `nowrap` (predeterminado), `wrap`, `wrap-reverse`.

- **`justify-content`**: Alinea los elementos hijos a lo largo del eje principal.

  - Valores: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`.

- **`align-items`**: Alinea los elementos hijos a lo largo del eje transversal.

  - Valores: `stretch` (predeterminado), `flex-start`, `flex-end`, `center`, `baseline`.

- **`align-content`**: Alinea las líneas del contenedor (cuando hay múltiples líneas de elementos, lo que ocurre si `flex-wrap` está en `wrap`).

  - Valores: `stretch` (predeterminado), `flex-start`, `flex-end`, `center`, `space-between`, `space-around`.

- **`gap`**: Define el espacio entre las filas y columnas de los elementos hijos.

  - Valores: cualquier valor de longitud (px, em, rem, %, etc.).

### 3. **Atributos que se usan solo en los elementos (Items Flex)**

Estos atributos se aplican a los elementos hijos dentro del contenedor Flexbox, controlando su tamaño y alineación individualmente:

- **`order`**: Cambia el orden de los elementos sin modificar el orden del código HTML.

  - Valores: cualquier número (por defecto es `0`).

- **`flex-grow`**: Define cómo un elemento puede crecer relativo a los otros elementos cuando hay espacio extra disponible en el contenedor.

  - Valores: cualquier número positivo (predeterminado `0`).

- **`flex-shrink`**: Define cómo un elemento puede encogerse relativo a los otros elementos cuando hay menos espacio disponible en el contenedor.

  - Valores: cualquier número positivo (predeterminado `1`).

- **`flex-basis`**: Define el tamaño base inicial del elemento antes de que se aplique el espacio disponible o el espacio negativo.

  - Valores: cualquier longitud o `auto` (predeterminado `auto`).

- **`align-self`**: Permite alinear un solo elemento a lo largo del eje transversal, independientemente de los otros elementos.

  - Valores: `auto` (predeterminado), `flex-start`, `flex-end`, `center`, `baseline`, `stretch`.

- **`flex`**: Es una abreviatura para las propiedades `flex-grow`, `flex-shrink` y `flex-basis`.

  - Ejemplo: `flex: 1 1 auto;`.

### 4. **Ejemplo Práctico**

Imagina que tienes un contenedor con varios elementos dentro:

```html

<div class="contenedor">

  <div class="item">Elemento 1</div>

  <div class="item">Elemento 2</div>

  <div class="item">Elemento 3</div>

</div>

```

Y el siguiente CSS:

```css

.contenedor {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

}

.item {

  flex: 1; /* Los elementos crecen para ocupar el espacio disponible */

  align-self: flex-start; /* Cada elemento se alinea al principio del contenedor */

}

```

- En este caso, el contenedor tiene `display: flex;`, lo que activa Flexbox. Los elementos se distribuyen en una fila (`flex-direction: row;`) y se distribuyen uniformemente con espacio entre ellos (`justify-content: space-between;`).

- Los elementos se alinean al inicio (`align-self: flex-start;`) pero crecen para ocupar el espacio disponible (`flex: 1;`).

Este ejemplo te da una idea general de cómo Flexbox puede ser utilizado para crear layouts adaptables y dinámicos. Flexbox es especialmente útil en layouts complejos que necesitan ser responsive o donde el control de la alineación y distribución de los elementos es crucial.