36a3257d29
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs, characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit, Local Font Access API, COMPONENT type, override key format, hex codes, px specs) with user-facing language across all 7 locales.
69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
---
|
|
title: Auto-Layout
|
|
description: Flexbox-basiertes Auto-Layout in OpenPencil — Richtung, Abstand, Polsterung, Ausrichtung und Kindgröße.
|
|
---
|
|
|
|
# Auto-Layout
|
|
|
|
Auto-Layout positioniert Kinder automatisch innerhalb eines Frames nach Flexbox-Regeln. Es verwaltet Richtung, Abstände, Ausrichtung und responsive Größenanpassung.
|
|
|
|
## Auto-Layout aktivieren
|
|
|
|
- Wählen Sie einen Frame und drücken Sie <kbd>⇧</kbd><kbd>A</kbd> (<kbd>Shift</kbd> + <kbd>A</kbd>), um Auto-Layout ein-/auszuschalten
|
|
- Wählen Sie lose Knoten und drücken Sie <kbd>⇧</kbd><kbd>A</kbd>, um sie in einen neuen Auto-Layout-Frame zu wickeln
|
|
|
|
Beim Umschließen werden Knoten nach visueller Position sortiert.
|
|
|
|
## Layout-Richtung
|
|
|
|
- **Horizontal** — Kinder fließen von links nach rechts
|
|
- **Vertikal** — Kinder fließen von oben nach unten
|
|
- **Umbruch** — Kinder umbrechen bei Platzmangel
|
|
|
|
## Abstände
|
|
|
|
### Zwischenraum (Gap)
|
|
|
|
Der Abstand zwischen benachbarten Kindern.
|
|
|
|
### Polsterung (Padding)
|
|
|
|
Der Abstand zwischen Frame-Rand und Kindern. Einheitlich oder pro Seite einstellbar.
|
|
|
|
## Ausrichtung
|
|
|
|
### Hauptachse (Justify)
|
|
|
|
- **Start** — Kinder packen zum Anfang
|
|
- **Mitte** — Kinder werden zentriert
|
|
- **Ende** — Kinder packen zum Ende
|
|
- **Zwischenraum** — gleicher Abstand zwischen Kindern
|
|
|
|
### Querachse (Align)
|
|
|
|
- **Start** — Kinder am Anfang ausrichten
|
|
- **Mitte** — Kinder zentrieren
|
|
- **Ende** — Kinder am Ende ausrichten
|
|
- **Dehnen** — Kinder füllen die Querachse
|
|
|
|
## Kindgröße
|
|
|
|
- **Fest** — verwendet die explizite Breite/Höhe des Kindes
|
|
- **Füllen** — dehnt sich aus, um verfügbaren Platz zu füllen
|
|
- **Anpassen** — schrumpft auf den Inhalt des Kindes
|
|
|
|
## Ziehen zum Umordnen
|
|
|
|
Innerhalb eines Auto-Layout-Frames können Sie ein Kind ziehen, um es unter Geschwistern umzuordnen.
|
|
|
|
## Tastenkürzel
|
|
|
|
| Aktion | Mac | Windows / Linux |
|
|
|--------|-----|-----------------|
|
|
| Auto-Layout umschalten | <kbd>⇧</kbd><kbd>A</kbd> | <kbd>Shift</kbd> + <kbd>A</kbd> |
|
|
|
|
## Tipps
|
|
|
|
- Verschachteln Sie Auto-Layout-Frames für komplexe responsive Layouts.
|
|
- Verwenden Sie „Füllen", damit ein Kind den restlichen Platz einnimmt, wie `flex-grow: 1` in CSS.
|