Responsive design

The logic required for this has consequences in terms of the positioning of the elements. The following aspects are important for the creation of such an application.

• The container for the control elements is a FlexLayout. It automatically arranges the contained elements in rows or columns, depending on the setting of the "orientation" property of the FlexLayout. The FlexLayout can move the excess elements of a row to the next row if, for example, the browser window is reduced in size.

• Elements in the FlexLayout cannot be placed absolutely with x and y coordinates in the properties "top", "bottom", "left", "right", as their position is determined automatically. The position of elements can be changed in this approach using the following properties.

  • orientation

    Determines whether the elements are to be arranged vertically or horizontally.

  • align items

    Specifies how the elements are positioned in the container - this property only works if the "wrap" property is not selected.

  • justify content

    Defines whether all components are placed one behind the other or at a distance from each other.

  • align content

    Sets the distribution of elements in the container - this property only works if the "wrap" property has been activated.