# Flex

> Flexbox de CSS: justify, align, gap, wrap y grow. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

Source: https://albakore.github.io/pyzed/es/library/flex/

:::tip[En pocas palabras]
Reparte las cosas a lo largo de una línea: juntas, con el mismo espacio o con una que crece.
:::

Coloca los hijos en un eje como el flexbox de CSS: `justify` en el eje principal (`start`, `center`, `end`, `between`, `around`, `evenly`), `align` en el eje cruzado, `gap` y `wrap`. `pz.flex_item(child, grow=, basis=)` hace crecer a un hijo o le da un tamaño base.

`pz.flex` · Categoría: [Disposición](https://albakore.github.io/pyzed/es/library/#disposición) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#flex)

**Código:**

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.column([
    pz.flex([box("A"), box("B"), box("C")], justify="between", width=440),
    pz.flex([box("fixed"), pz.flex_item(box("grows", w="fill"), grow=1), box("fixed")], gap=8, width=440),
    pz.flex([box("A"), box("B")], justify="center", gap=8, width=440),
], spacing=14)
```

:::note[Nuevo]
Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el [gestor de incidencias](https://github.com/albakore/pyzed/issues).
:::

## Cuándo usarlo

- Cuando `row`/`column` no bastan: reparto uniforme, elementos que crecen, tarjetas que saltan de línea.

## Uso

```python
import pyzed as pz
from pyzed import ui

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.column([
    pz.flex([box("A"), box("B"), box("C")], justify="between", width=440),
    pz.flex([box("fixed"), pz.flex_item(box("grows", w="fill"), grow=1), box("fixed")], gap=8, width=440),
    pz.flex([box("A"), box("B")], justify="center", gap=8, width=440),
], spacing=14)
```

## Variantes

:::note[Sobre estas capturas]
Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre **Código** bajo una captura para ver el fragmento que la dibuja; los nombres libres como `on_save` son tus propios callbacks.
:::

### Justificar

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.flex([box("A"), box("B")], justify="start", gap=8, width=360)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.flex([box("A"), box("B")], justify="center", gap=8, width=360)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.flex([box("A"), box("B")], justify="end", gap=8, width=360)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.flex([box("A"), box("B"), box("C")], justify="between", width=360)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.flex([box("A"), box("B"), box("C")], justify="around", width=360)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.flex([box("A"), box("B"), box("C")], justify="evenly", width=360)
```

### Crecer

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.flex([box("fixed"), pz.flex_item(box("grows", w="fill"), grow=1), box("fixed")], gap=8, width=360)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.flex([box(str(i)) for i in range(1, 7)], gap=8, wrap=True, width=300)
```

## Eventos

Flex no tiene eventos propios: muestra lo que le das. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

## Propiedades y API

### `pz.flex`

```python
flex(
    children=(),
    *,
    direction='row',
    justify='start',
    align='start',
    gap=0,
    wrap=False,
    padding=None,
    width=None,
    height=None,
)
```

Coloca los hijos a lo largo de un eje, como flexbox de CSS, con `justify` en el eje principal y `align` en el transversal. Usa `pz.flex_item` para que un hijo crezca o tenga un tamaño fijo.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `children` | `()` | Los widgets, o `pz.flex_item(...)` para hijos con su propio tamaño. |
| `direction` | `"row"` | `"row"` o `"column"`. |
| `justify` | `"start"` | `"start"`, `"center"`, `"end"`, `"between"`, `"around"` o `"evenly"`. No tiene efecto si algún hijo crece. |
| `align` | `"start"` | Alineación transversal: `"start"`, `"center"` o `"end"`. |
| `gap` | `0` | Espacio entre hijos. |
| `wrap` | `False` | Pasa a nuevas líneas (solo filas con `justify="start"`). |
| `padding` | `None` | Espacio alrededor de los hijos. |
| `width` | `None` | Ancho. |
| `height` | `None` | Alto. |

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#flex)

### `pz.flex_item`

```python
flex_item(content, *, grow=1, basis=None, align=None)
```

Da tamaño a un hijo de `pz.flex`.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `content` | *obligatorio* | El widget. |
| `grow` | `1` | Parte del espacio libre en el eje principal (`0` mantiene su tamaño natural). |
| `basis` | `None` | Un tamaño fijo en píxeles en el eje principal, en lugar de crecer. |
| `align` | `None` | Alineación transversal de este hijo. |

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#flex_item)

## Relacionados

- [Cuadrícula](https://albakore.github.io/pyzed/es/library/grid/): Columnas iguales, o pistas como en CSS con expansión.
- [Fila](https://albakore.github.io/pyzed/es/library/row/): Coloca los hijos en horizontal.