Flex


super: Object

This class is reserved and cannot be directly instantiated.

Events

  • None

Properties

  • var enabled: Bool Decides during layout/sizing whether or not styling properties should be applied

  • var includedInLayout: Bool Decides if we should include this view when calculating layout

  • var enabledAndInLayout: Bool Same as isEnabled and isIncludedInLayout

  • var grow: Float Describes how any space within a container should be distributed among its children along the main axis

  • var shrink: Float Describes how to shrink children along the main axis in the case that the total size of the children overflow the size of the container on the main axis

  • var direction: Direction Specifies the direction in which children and text in a hierarchy should be laid out

  • var flexDirection: FlexDirection Controls the direction in which children of a view are laid out. This is also referred to as the main axis

  • var justifyContent: Justify Describes how to align children within the main axis of their container

  • var alignContent: Align Defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using flex wrap.

  • var alignItems: Align Describes how to align children along the cross axis of their container

  • var alignSelf: Align Has the same options and effect as align items but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent

  • var wrap: Wrap Controls what happens when children overflow the size of the container along the main axis

  • var display: Display display is flex or none, with none the view is removed from the flex layout

  • var aspectRatio: Float Aspect ratio, the ratio between the width and the height of a view

  • var positionType: PositionType Defines how it is positioned within its parent; absolute remove the view from the flex flow and position it at the given position

  • var basis: FlexValue Flex basis, default size of a view along the main axis

  • var width: FlexValue Width in FlexValue, width dimension of the view

  • var height: FlexValue Height in FlexValue, height dimension of the view

  • var minWidth: FlexValue Minimum width in FlexValue, minimum width of the view

  • var maxWidth: FlexValue Maximum width in FlexValue, maximum width of the view

  • var minHeight: FlexValue Minimum height in FlexValue, minimum height of the view

  • var maxHeight: FlexValue Maximum height in FlexValue, maximum height of the view

  • var left: FlexValue Left position in FlexValue when position type is absolute.

  • var top: FlexValue Top position in FlexValue when position type is absolute.

  • var right: FlexValue Right position in FlexValue when position type is absolute.

  • var bottom: FlexValue Bottom position in FlexValue when position type is absolute.

  • var start: FlexValue Start position in FlexValue when position type is absolute; it depends on text and childrens direction.

  • var end: FlexValue End position in FlexValue when position type is absolute; it depends on text and childrens direction.

  • var marginLeft: FlexValue Margin left in FlexValue, affects the spacing around the outside of a view

  • var marginTop: FlexValue Margin top in FlexValue, affects the spacing around the outside of a view

  • var marginRight: FlexValue Margin right in FlexValue, affects the spacing around the outside of a view

  • var marginBottom: FlexValue Margin bottom in FlexValue, affects the spacing around the outside of a view

  • var marginStart: FlexValue Margin start in FlexValue, it depends on text and childrens direction. Affects the spacing around the outside of a view

  • var marginEnd: FlexValue Margin end in FlexValue, it depends on text and childrens direction. Affects the spacing around the outside of a view

  • var marginHorizontal: FlexValue Margin horizontal in FlexValue, affects the spacing around the outside of a view

  • var marginVertical: FlexValue Margin vertical in FlexValue

  • var margin: FlexValue Margin in FlexValue, affects the spacing around the outside of a view

  • var paddingLeft: FlexValue Padding left in FlexValue, affects the size of the view it is applied to and eventually offset the location of any children

  • var paddingTop: FlexValue Padding top in FlexValue, affects the size of the view it is applied to and eventually offset the location of any children

  • var paddingRight: FlexValue Padding right in FlexValue, affects the size of the view it is applied to and eventually offset the location of any children

  • var paddingBottom: FlexValue Padding bottom in FlexValue, affects the size of the view it is applied to and eventually offset the location of any children

  • var paddingStart: FlexValue Padding start in FlexValue, affects the size of the view it is applied to and eventually offset the location of any children, it depends on text and childrens direction

  • var paddingEnd: FlexValue Padding end in FlexValue, it depends on text and childrens direction

  • var paddingHorizontal: FlexValue Padding horizontal in FlexValue, affects the size of the view it is applied to and eventually offset the location of any children

  • var paddingVertical: FlexValue Padding vertical in FlexValue, affects the size of the view it is applied to and eventually offset the location of any children

  • var padding: FlexValue Padding in FlexValue, affects the size of the view it is applied to and eventually offset the location of any children

  • var borderLeftWidth: Float Border left width, acts exactly like padding. Does not do any drawing.

  • var borderTopWidth: Float Border top width, acts exactly like padding. Does not do any drawing.

  • var borderRightWidth: Float Border right width, acts exactly like padding. Does not do any drawing.

  • var borderBottomWidth: Float Border bottom width, acts exactly like padding. Does not do any drawing.

  • var borderStartWidth: Float Border start width, it depends on text and childrens direction

  • var borderEndWidth: Float Border end width, it depends on text and childrens direction

  • var borderWidth: Float Border width, acts exactly like padding. Does not do any drawing.

Methods

  • func applyLayout() Apply layout preserving origin

  • func calculateLayoutWithSize(value: Size): Size Returns the size of the view based on provided constraints. Pass Layout.undefined for an unconstrained dimension.

  • func applyLayoutPreservingOrigin(value: Bool) Apply layout preserving origin

  • func markDirty() Mark that a view's layout needs to be recalculated. Only works for leaf views

Enumeration

Direction

  • .Inherit
  • .LTR
  • .RTL

FlexDirection

  • .Column
  • .Row

Justify

  • .Center
  • .FlexEnd
  • .FlexStart
  • .SpaceAround
  • .SpaceBetween
  • .SpaceEvenly

Align

  • .Auto
  • .Baseline
  • .Center
  • .FlexEnd
  • .FlexStart
  • .SpaceAround
  • .SpaceBetween
  • .Stretch

Wrap

  • .No
  • .Yes

Display

  • .Flex
  • .None

PositionType

  • .Absolute
  • .Relative