2026-03-03 09:15:39 +00:00
---
title: Auto-Layout
description: Flexbox-basiertes Auto-Layout in OpenPencil — Richtung, Abstand, Polsterung, Ausrichtung und Kindgröße.
---
# Auto-Layout
Remove implementation details from user guide
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.
2026-03-08 09:55:25 +00:00
Auto-Layout positioniert Kinder automatisch innerhalb eines Frames nach Flexbox-Regeln. Es verwaltet Richtung, Abstände, Ausrichtung und responsive Größenanpassung.
2026-03-03 09:15:39 +00:00
## Auto-Layout aktivieren
Use <kbd> for keyboard shortcuts across all docs
Wrap all keyboard shortcut references in <kbd> tags in user guide,
reference, and development docs across all 7 locales (en, de, es,
fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
- 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
2026-03-03 09:15:39 +00:00
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 |
|--------|-----|-----------------|
Use <kbd> for keyboard shortcuts across all docs
Wrap all keyboard shortcut references in <kbd> tags in user guide,
reference, and development docs across all 7 locales (en, de, es,
fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
| Auto-Layout umschalten | < kbd > ⇧< / kbd > < kbd > A< / kbd > | < kbd > Shift< / kbd > + < kbd > A< / kbd > |
2026-03-03 09:15:39 +00:00
## 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.
