Responsives Design

Die dafür erforderliche Logik hat Konsequenzen in Bezug auf die Positionierung der Elemente. Folgende Aspekte sind wichtig für die Erstellung einer solchen Anwendung.

• Der Container für die Steuerelemente ist ein FlexLayout. Es ordnet die enthaltenen Elemente automatisch zeilen- oder spaltenweise an, je nach Einstellung der Eigenschaft "orientation" des FlexLayouts. Das FlexLayout kann die überschüssigen Elemente einer Zeile in die nächste Zeile verschieben, wenn z. B. das Browserfenster verkleinert wird.

• Elemente im FlexLayout können nicht absolut mit x- und y-Koordinaten in den Eigenschaften "top", "bottom", "left", "right" platziert werden, da ihre Position automatisch ermittelt wird. Die Position von Elementen kann in diesem Ansatz durch folgende Eigenschaften verändert werden.

  • orientation

    Legt fest, ob die Elemente vertikal oder horizontal angeordnet werden sollen.

  • align items

    Gibt an, wie die Elemente im Container positioniert werden – diese Eigenschaft funktioniert nur, wenn die Eigenschaft "wrap" nicht selektiert ist.

  • justify content

    Definiert, ob alle Komponenten hintereinander oder mit einem Abstand zueinander platziert werden.

  • align content

    Stellt die Verteilung von Elementen im Container ein – diese Eigenschaft funktioniert nur, wenn die Eigenschaft "wrap" aktiviert worden ist.