55 lines
2 KiB
Markdown
55 lines
2 KiB
Markdown
---
|
|
title: Auto-layout
|
|
description: Layout flex i grid w OpenPencil — kierunek, odstępy, padding, wyrównanie, rozmiary i ścieżki CSS Grid.
|
|
---
|
|
# Auto-layout
|
|
|
|
Auto-layout automatycznie pozycjonuje dzieci wewnątrz ramki. Obsługuje dwa tryby: **flex** (przepływ poziomy/pionowy) i **grid** (wiersze i kolumny z wymiarowaniem ścieżek).
|
|
|
|
<kbd>⇧</kbd><kbd>A</kbd> aby włączyć/wyłączyć lub opakować zaznaczenie.
|
|
|
|
## Kierunek
|
|
- **Poziomy** — od lewej do prawej
|
|
- **Pionowy** — z góry na dół
|
|
- **Zawijanie** — zawija gdy brakuje miejsca
|
|
|
|
## Odstępy
|
|
**Gap** między sąsiednimi dziećmi. **Padding** między krawędzią ramki a dziećmi.
|
|
|
|
## Wyrównanie
|
|
- **Oś główna (Justify):** początek, środek, koniec, rozłóż
|
|
- **Oś poprzeczna (Align):** początek, środek, koniec, rozciągnij
|
|
|
|
## Rozmiar dzieci
|
|
- **Stały** — jawna szerokość/wysokość
|
|
- **Wypełnij** — rozciąga się w dostępnej przestrzeni
|
|
- **Dopasuj** — kurczy się do zawartości
|
|
|
|
## CSS Grid
|
|
|
|
Layout siatkowy (grid) organizuje dzieci w wierszach i kolumnach z jawnym wymiarowaniem ścieżek.
|
|
|
|
### Włączanie siatki
|
|
|
|
Wybierz ramkę z włączonym auto-layout i kliknij ikonę siatki w pasku narzędzi layout, aby przełączyć z flex na grid.
|
|
|
|
### Wymiarowanie ścieżek
|
|
|
|
Zdefiniuj ścieżki kolumn i wierszy za pomocą trzech trybów:
|
|
|
|
- **fr** — jednostka ułamkowa, dzieli dostępną przestrzeń proporcjonalnie
|
|
- **px** — stały rozmiar w pikselach
|
|
- **auto** — dopasowuje się do zawartości
|
|
|
|
### Odstępy siatki
|
|
|
|
Ustaw oddzielne odstępy poziome (kolumny) i pionowe (wiersze) między komórkami.
|
|
|
|
### Pozycjonowanie dzieci
|
|
|
|
Dzieci są umieszczane w komórkach siatki automatycznie w kolejności wierszy. Można nadpisać umieszczenie wartościami początku kolumny/wiersza i rozpiętości we właściwościach layout dziecka.
|
|
|
|
### Eksport JSX i Tailwind
|
|
|
|
Layouty siatkowe eksportują się jako JSX z klasami Tailwind: `grid grid-cols-3`, `gap-x-4 gap-y-2`, `col-start-2 row-span-2`.
|