Flex-Übersicht (1.0)

Was ist Flex?

Flex ist ein neuer Modus für die Gestaltung von Abschnitten und Seiten. Dieses System basiert auf neuer Inline-Editing-Technologie und flexiblen Layouts wie CSS-Raster, Flex, verbesserte Ausrichtung und so weiter. Flex ermöglicht volle Responsivität und pixelgenaue Präzision für jedes Element durch Haltepunkte.

Flex ist nahtlos in den bestehenden Editor integriert, damit Benutzer entscheiden können, wann und wo sie es verwenden möchten. Das bedeutet, dass Flex die gleichen Vorteile wie unser Editor bietet, jedoch mit wesentlich mehr Designfunktionen.

Flex-Abschnitte hinzufügen

So fügen Sie einen Flex-Abschnitt hinzu:

1. Bewegen Sie den Mauszeiger zwischen die Zeilen, und klicken Sie auf die Schaltfläche Abschnitt hinzufügen. Abschnitte werden in der linken Seitenleiste angezeigt. Alternativ können Sie auch mit der rechten Maustaste das Kontextmenü öffnen und auf Abschnitt hinzufügen klicken.
2. Klicken Sie in der Seitenleiste auf Flex-Abschnitte.
3. Klicken Sie auf den Flex-Abschnitt, den Sie hinzufügen möchten, und klicken Sie dann oben auf der Seite auf Speichern.
4. Der Flex-Modus wird mit dem zu bearbeitenden Abschnitt geöffnet.

Weitere Informationen finden Sie unter Hinzufügen und Bearbeiten von Flex-Abschnitten (1.0).

Der Flex-Modus im Überblick

Ebenen-Bereich

Der Ebenen-Bereich wird auf der linken Seite des Editors angezeigt und zeigt die Elemente auf der Seite an (Raster, Widgets, Flexboxen, Textfelder usw.). Hier können Sie Elemente auswählen, neu anordnen und umbenennen. Der Ebenen-Bereich beginnt immer mit dem Abschnitt, darunter befinden sich die Raster, gefolgt von den Widgets oder Containern.

Alternativ können Sie wie folgt zwischen den Elementen navigieren:

• Wählen Sie ein Element im Raster aus und gehen Sie auf das Element im darüber angezeigten Menü.
  
• Klicken Sie auf die Breadcrumbs oberhalb des Bereichs „Design“.

Design-Bereich

Der Design-Bereich wird auf der rechten Seite des Editors angezeigt und enthält Ihre Design-Steuerelemente für das ausgewählte Element (Container, Flexbox, Widget). Die Designoptionen umfassen Layout, Größe, Ausrichtung und mehr.

Größenabmessungen im Design-Bereich

Sie haben in Flex mehrere Größenabmessungen.

• Pixel (px). Die Größe bleibt an jedem Haltepunkt gleich.
• Viewport-Breite (Abk. „VW“ für „Viewport Width“). % der Breite des Elements bei Anzeige auf einem bestimmten Bildschirm. 10 VW sind 10 % der Viewport-Breite. 100 VW nehmen 100 % der Bildschirmbreite in Anspruch. Standardmäßig werden Abstände und Widget-Größen in % festgelegt.
• Viewport-Höhe (Abk. „VH“ für „Viewport Height“). % der Höhe eines Elements bei Anzeige auf einem bestimmten Bildschirm. 10 VH sind 10 % der Viewport-Höhe auf jeder Bildschirmgröße.
• A. Die Größe wird automatisch durch den Inhalt bestimmt.
• Min & Max. Die kleinste/größte Abmessung eines Elements. Diese Einstellung sorgt dafür, dass ein Element bei der Größenänderung nicht kleiner/größer wird als dieser Wert.

Ausrichtung

Anordnen

Sie können überlappende Objekte sowohl im Design-Bereich als auch im Ebenen-Bereich neu anordnen, indem Sie das Objekt einfach nach unten oder oben ziehen.

Selbstausrichtung vs. Ausrichtung bei Flexbox

Für Flexboxen gibt es zwei verschiedene Einstellungen für die automatische Ausrichtung im Bereich „Design“.

• Wählen Sie unter „Layout“ Vertikal oder Horizontal aus, um eine Achse für Elemente in der Flexbox einzurichten.
• Wählen Sie unter „In Flexbox ausrichten“ aus, wie Elemente in der ausgewählten Achse platziert werden.
  
• Wählen Sie unter „Ausrichten“ aus, wie die gesamte Flexbox relativ zum Raster ausgerichtet wird. Sie können nur unter der entgegengesetzten Achse ausrichten.
  
• Wählen Sie unter „Ausrichten“ aus, wo ein Element innerhalb einer Flexbox (z. B. eine Schaltfläche) auf der gewählten Autolayout-Achse ausgerichtet werden soll.
  

PIN

Im Bereich „Design“ können Sie Elemente auf einer bestimmten Position in einer Zelle fixieren, sodass die Position relativ zur Zelle bleibt, wenn sich die Größe der Zelle ändert.

So fixieren Sie ein Element an einer Position in einer Zelle:

1. Wählen Sie das Element aus und scrollen Sie im Bereich „Design“ zu Position.
2. Klicken Sie neben „Fixieren“ auf den Pfeil, der der Position entspricht, an der Sie das Element in der Zelle fixieren möchten.
   

Das Element wird an dieser Stelle in der Zelle fixiert, wenn sich die Rastergröße ändert.

Haltepunkte

Ein Haltepunkt ist die Größe, an der sich das Design an eine bestimmte Bildschirmbreite anpasst. Durch Haltepunkte bleiben Designs beim Vergrößern und Verkleinern responsiv. In Flex gibt es die folgenden Standard-Haltepunkte:

• Desktop (1025–1399 Pixel)

• Breiter Desktop (1400 Pixel und höher)

• Tablet (768–1024 Pixel)

• Mobilgerät (767 Pixel und weniger)

• Mobiles Querformat (468–767 Pixel)

Sie können oben auf der Seite zwischen den Haltepunkten wechseln, indem Sie die unterschiedlichen Ansichten anklicken.

Sie können auch bestimmte Elemente an bestimmten Haltepunkten ausblenden. Lesen Sie den Abschnitt Flex-Haltepunkte (1.0), um mehr über Haltepunkte und das Ausblenden von Elementen zu erfahren.