58 lines
2.1 KiB
Markdown
58 lines
2.1 KiB
Markdown
---
|
|
title: Auto-layout
|
|
description: Layout flex e griglia in OpenPencil — direzione, spaziatura, padding, allineamento, dimensionamento e track CSS Grid.
|
|
---
|
|
# Auto-layout
|
|
|
|
L'auto-layout posiziona i figli automaticamente all'interno di un frame. Supporta due modalità: **flex** (flusso orizzontale/verticale) e **griglia** (righe e colonne con dimensionamento dei track).
|
|
|
|
<kbd>⇧</kbd><kbd>A</kbd> per attivare/disattivare o avvolgere la selezione in un frame auto-layout.
|
|
|
|
## Direzione
|
|
- **Orizzontale** — da sinistra a destra
|
|
- **Verticale** — dall'alto in basso
|
|
- **A capo** — va a capo quando lo spazio finisce
|
|
|
|
## Spaziatura
|
|
**Gap** tra figli adiacenti. **Padding** tra bordo del frame e figli (uniforme o per lato).
|
|
|
|
## Allineamento
|
|
- **Asse principale (Justify):** inizio, centro, fine, spazio tra
|
|
- **Asse trasversale (Align):** inizio, centro, fine, estendi
|
|
|
|
## Dimensionamento figli
|
|
- **Fisso** — larghezza/altezza esplicita
|
|
- **Riempi** — si estende nello spazio disponibile
|
|
- **Adatta** — si restringe al contenuto
|
|
|
|
## Riordino per trascinamento
|
|
Trascina un figlio per riordinarlo, con indicatore visuale di inserimento.
|
|
|
|
## CSS Grid
|
|
|
|
Il layout a griglia organizza i figli in righe e colonne con dimensionamento esplicito dei track.
|
|
|
|
### Attivare la griglia
|
|
|
|
Seleziona un frame con auto-layout attivo e clicca sull'icona griglia nella barra degli strumenti layout per passare da flex a griglia.
|
|
|
|
### Dimensionamento dei track
|
|
|
|
Definisci track di colonne e righe con tre modalità:
|
|
|
|
- **fr** — unità frazionaria, divide lo spazio disponibile proporzionalmente
|
|
- **px** — dimensione fissa in pixel
|
|
- **auto** — si adatta al contenuto
|
|
|
|
### Spaziatura della griglia
|
|
|
|
Imposta gap orizzontali (colonne) e verticali (righe) separati tra le celle.
|
|
|
|
### Posizionamento dei figli
|
|
|
|
I figli vengono posizionati nelle celle della griglia automaticamente in ordine di riga. Puoi sovrascrivere il posizionamento con valori di inizio colonna/riga e span nelle proprietà layout del figlio.
|
|
|
|
### Esportazione JSX e Tailwind
|
|
|
|
I layout a griglia vengono esportati come JSX con classi Tailwind: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`.
|