Mit dem fließenden Layout können Sie Elemente so ausrichten, dass ihre Positionen und Proportionen automatisch an die jeweilige Seitengröße und -ausrichtungen angepasst werden. Das fließende Layout eignet sich besonders für responsive Dokumente. Es kann aber auch für Elemente mit fester Größe verwendet werden.
Sie können in Google Web Designer mit verschiedenen Methoden ein fließendes Layout erstellen:
Flexbox (Fluid Layout) - Google Web Designer
Prozentbasierte Werte
Sie können Größen und Positionen in Prozent statt in Pixel festlegen, sodass die Elemente relativ zueinander positioniert bleiben und relativ zueinander ausgerichtet sind.
Wenn Sie Prozentsätze statt Pixel verwenden möchten, klicken Sie im Steuerfeld "Eigenschaften" auf px und wählen Sie aus der Drop-down-Liste % aus.
Wenn Sie alle Positions- und Größenwerte in Prozentsätze umwandeln möchten, klicken Sie auf die Schaltfläche Prozentsätze verwenden .
Sie können in Ihrem Dokument eine Kombination aus prozent- und pixelbasierten Werten verwenden.
Verankerung
Durch Verankerung können Sie Elemente innerhalb eines Containers dauerhaft ausrichten, auch wenn sich das Element, die Containergröße, der Abstand oder die Rahmenbreite ändert. Alle von Ihnen festgelegten Positions- oder Verschiebungseigenschaften versetzen das Element gegenüber dem Ankerpunkt.
Sie wählen einen Modus für die horizontale Verankerung und einen für die vertikale Verankerung aus. Die Standardeinstellungen sind „top“ und „left“.
Horizontale Verankerungsmodi
| Modus | Effekt |
|---|---|
| left | Der linke Rand des Elements wird am linken Rand des Containers ausgerichtet. |
| center | Die horizontale Mitte des Elements wird an der horizontalen Mitte des Containers ausgerichtet. |
| right | Der rechte Rand des Elements wird am rechten Rand des Containers ausgerichtet. |
Vertikale Verankerungsmodi
| Modus | Effekt |
|---|---|
| top | Der obere Rand des Elements wird am oberen Rand des Containers ausgerichtet. |
| middle | Die vertikale Mitte des Elements wird an der vertikalen Mitte des Containers ausgerichtet. |
| bottom | Der untere Rand des Elements wird am unteren Rand des Containers ausgerichtet. |
Sie können den Verankerungsmodus im Steuerfeld „Eigenschaften“ oder in der Leiste mit den Tooloptionen festlegen, wenn das Auswahltool aktiviert ist.
Flexbox
Mit Flexbox (CSS Flexible Box Layout Module) können Sie Elemente in einem Container flexibel in Zeilen oder Spalten anordnen. Jedes Element kann vergrößert oder verkleinert werden, um den Platz im Container optimal zu nutzen, wobei die festgelegte Reihenfolge und der Abstand beibehalten werden.
Auf dem Tab Flexbox des Steuerfelds „Responsiv“ können Sie Flexbox verwenden und Flexbox-Eigenschaften konfigurieren. Weitere Informationen zur Verwendung von Flexbox