Container

The Container is part of the Layout components which the Unite UX supports.

Usage

  • You can put multiple components into it.
  • Allows you to control how inner components are placed inside.
  • Allows configuration options such as Display, Direction, Justify content, Align items which are part of flex box model.
  • Used for building responsive layouts in the Blank and App Layout views.

Properties of Interest

  • Display—(default, block, inline-block, flex, inline-flex) The property sets whether an element is treated as a block or an inline element and the layout used for its children, such as flex.

Following properties work only when the display is set to flex or inline-flex

  • Direction—(column (reverse), row (reverse)) Set the direction of the items in a container with direction utilities. It controls how flex items are placed in the container defining the main axis and the direction (normal or reversed).

Direction

  • Justify content—(start, end, center, between, around) Defines how the space is distributed between and around the content items.

Justify Content

  • Align items—(start, end, center, baseline, stretch) Sets the align-self value on all direct children as a group, it controls the alignment of items on the Cross Axis.

Align Items

  • Align self—(start, end, center, baseline, stretch) Overrides the parent’s align-items value.
In this article
Not finding the help you need?