58 lines
2.2 KiB
Markdown
58 lines
2.2 KiB
Markdown
---
|
|
title: Auto-layout
|
|
description: Layout flex y grid en OpenPencil — dirección, espaciado, padding, alineación, dimensionamiento y tracks CSS Grid.
|
|
---
|
|
# Auto-layout
|
|
|
|
El auto-layout posiciona los hijos automáticamente dentro de un marco. Soporta dos modos: **flex** (flujo horizontal/vertical) y **grid** (filas y columnas con dimensionamiento de tracks).
|
|
|
|
## Activar auto-layout
|
|
|
|
- Selecciona un marco y pulsa <kbd>⇧</kbd><kbd>A</kbd> (<kbd>Shift</kbd> + <kbd>A</kbd>) para activar o desactivar el auto-layout
|
|
- Selecciona nodos sueltos (sin marco padre) y pulsa <kbd>⇧</kbd><kbd>A</kbd> para envolverlos en un nuevo marco con auto-layout
|
|
|
|
## Dirección
|
|
- **Horizontal** — de izquierda a derecha
|
|
- **Vertical** — de arriba abajo
|
|
- **Ajuste** — ajusta cuando se acaba el espacio
|
|
|
|
## Espaciado
|
|
**Gap** entre hijos adyacentes. **Padding** entre borde del marco e hijos.
|
|
|
|
## Alineación
|
|
- **Eje principal (Justify):** inicio, centro, fin, espacio entre
|
|
- **Eje transversal (Align):** inicio, centro, fin, estirar
|
|
|
|
## Dimensionamiento de hijos
|
|
- **Fijo** — ancho/alto explícito
|
|
- **Rellenar** — se expande en el espacio disponible
|
|
- **Ajustar** — se reduce al contenido
|
|
|
|
## CSS Grid
|
|
|
|
El layout grid organiza los hijos en filas y columnas con dimensionamiento explícito de tracks.
|
|
|
|
### Activar Grid
|
|
|
|
Selecciona un marco con auto-layout activado y haz clic en el icono de cuadrícula en la barra de herramientas de layout para cambiar de flex a grid.
|
|
|
|
### Dimensionamiento de tracks
|
|
|
|
Define tracks de columnas y filas con tres modos:
|
|
|
|
- **fr** — unidad fraccional, divide el espacio disponible proporcionalmente
|
|
- **px** — tamaño fijo en píxeles
|
|
- **auto** — se ajusta al contenido
|
|
|
|
### Espaciado del grid
|
|
|
|
Establece gaps horizontales (columnas) y verticales (filas) separados entre celdas.
|
|
|
|
### Posicionamiento de hijos
|
|
|
|
Los hijos se colocan en las celdas del grid automáticamente en orden de fila. Puedes sobrescribir la ubicación con valores de inicio de columna/fila y span en las propiedades de layout del hijo.
|
|
|
|
### Exportación JSX y Tailwind
|
|
|
|
Los layouts grid se exportan como JSX con clases Tailwind: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`.
|