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?

Unite UX direction is evolving!

Dear friends, after gaining plenty of great experience and feedback through working with you, our direction evolves to better serve your needs. Our mission to bridge the design to development gap remains unchanged. The way to solve it, though is new. Visit our webpage to meet the new Unite UX: The collaborative design to development UI components builder.

Explore the New Unite UX