Flex

public class Flex

FlexLayout interface.

The interface is accessible from any UIView class instance:

   label.flex.margin(10)
  • Flex items’s UIView.

    Declaration

    Swift

    public let view: UIView
  • Item natural size, considering only properties of the view itself. Independent of the item frame.

    Declaration

    Swift

    public var intrinsicSize: CGSize
  • This method adds a flex item (UIView) to a flex container. Internally the methods adds the UIView has subviews and enables flexbox.

    Declaration

    Swift

    public func addItem() -> Flex

    Return Value

    The added view flex interface

  • This method is similar to addItem(: UIView) except that it also creates the flex item’s UIView. Internally the method creates an UIView, adds it has subviews and enables flexbox. This is useful to add a flex item/container easily when you don’t need to refer to it later.

    Declaration

    Swift

    public func addItem(_ view: UIView) -> Flex

    Parameters

    view

    view to add to the flex container

    Return Value

    The added view flex interface

  • This method is used to structure your code so that it matches the flexbox structure. The method has a closure parameter with a single parameter called flex. This parameter is in fact, the view’s flex interface, it can be used to adds other flex items and containers.

    Declaration

    Swift

    public func define(_ closure: (_ flex: Flex) -> Void) -> Flex

    Parameters

    closure

    Return Value

    Flex interface

  • The method layout the flex container’s children

    Declaration

    Swift

    public func layout(mode: LayoutMode = .fitContainer)

    Parameters

    mode

    specify the layout mod (LayoutMode).

  • This property controls dynamically if a flexbox’s UIView is included or not in the flexbox layouting. When a flexbox’s UIView is excluded, FlexLayout won’t layout the view and its children views.

    Declaration

    Swift

    public var isIncludedInLayout: Bool = true
  • This method controls dynamically if a flexbox’s UIView is included or not in the flexbox layouting. When a flexbox’s UIView is excluded, FlexLayout won’t layout the view and its children views.

    Declaration

    Swift

    public func isIncludedInLayout(_ included: Bool) -> Flex

    Parameters

    included

    true to layout the view

    Return Value

  • The framework is so highly optimized, that flex item are layouted only when a flex property is changed and when flex container size change. In the event that you want to force FlexLayout to do a layout of a flex item, you can mark it as dirty using markDirty().

    Dirty flag propagates to the root of the flexbox tree ensuring that when any item is invalidated its whole subtree will be re-calculated

    Declaration

    Swift

    public func markDirty() -> Flex

    Return Value

    Flex interface

  • Returns the item size when layouted in the specified frame size

    Declaration

    Swift

    public func sizeThatFits(size: CGSize) -> CGSize

    Parameters

    size

    frame size

    Return Value

    item size

  • The direction property establishes the main-axis, thus defining the direction flex items are placed in the flex container.

    The direction property specifies how flex items are laid out in the flex container, by setting the direction of the flex container’s main axis. They can be laid out in two main directions, like columns vertically or like rows horizontally.

    Note that row and row-reverse are affected by the layout direction (see layoutDirection property) of the flex container. If its text direction is LTR (left to right), row represents the horizontal axis oriented from left to right, and row-reverse from right to left; if the direction is rtl, it’s the opposite.

    Declaration

    Swift

    public func direction(_ value: Direction) -> Flex

    Parameters

    value

    Default value is .column

  • The wrap property controls whether the flex container is single-lined or multi-lined, and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.

    Declaration

    Swift

    public func wrap(_ value: Wrap) -> Flex

    Parameters

    value

    Default value is .noWrap

  • Direction defaults to Inherit on all nodes except the root which defaults to LTR. It is up to you to detect the user’s preferred direction (most platforms have a standard way of doing this) and setting this direction on the root of your layout tree.

    Declaration

    Swift

    public func layoutDirection(_ value: LayoutDirection) -> Flex

    Parameters

    value

    new LayoutDirection

    Return Value

  • The justifyContent property defines the alignment along the main-axis of the current line of the flex container. It helps distribute extra free space leftover when either all the flex items on a line have reached their maximum size. For example, if children are flowing vertically, justifyContent controls how they align vertically.

    Declaration

    Swift

    public func justifyContent(_ value: JustifyContent) -> Flex

    Parameters

    value

    Default value is .start

  • The alignItems property defines how flex items are laid out along the cross axis on the current line. Similar to justifyContent but for the cross-axis (perpendicular to the main-axis). For example, if children are flowing vertically, alignItems controls how they align horizontally.

    Declaration

    Swift

    public func alignItems(_ value: AlignItems) -> Flex

    Parameters

    value

    Default value is .stretch

  • The alignSelf property controls how a child aligns in the cross direction, overriding the alignItems of the parent. For example, if children are flowing vertically, alignSelf will control how the flex item will align horizontally.

    Declaration

    Swift

    public func alignSelf(_ value: AlignSelf) -> Flex

    Parameters

    value

    Default value is .auto

  • The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justifyContent aligns individual items within the main-axis.

    Declaration

    Swift

    public func alignContent(_ value: AlignContent) -> Flex

    Parameters

    value

    Default value is .start

  • The grow property defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

    Declaration

    Swift

    public func grow(_ value: CGFloat) -> Flex

    Parameters

    value

    Default value is 0

  • It specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the main-axis.

    When omitted, it is set to 0 and the flex shrink factor is multiplied by the flex basis when distributing negative space.

    A shrink value of 0 keeps the view’s size in the main-axis direction. Note that this may cause the view to overflow its flex container.

    Declaration

    Swift

    public func shrink(_ value: CGFloat) -> Flex

    Parameters

    value

    Default value is 1

  • This property takes the same values as the width and height properties, and specifies the initial size of the flex item, before free space is distributed according to the grow and shrink factors.

    Specifying nil set the basis as auto, which means the length is equal to the length of the item. If the item has no length specified, the length will be according to its content.

    Declaration

    Swift

    public func basis(_ value: CGFloat?) -> Flex

    Parameters

    value

    Default value is 0

  • The value specifies the view’s width in pixels. The value must be non-negative.

    Declaration

    Swift

    public func width(_ value: CGFloat?) -> Flex
  • The value specifies the view’s width in percentage of its container width. The value must be non-negative. Example: view.flex.width(20%)

    Declaration

    Swift

    public func width(_ percent: FPercent) -> Flex
  • The value specifies the view’s height in pixels. The value must be non-negative.

    Declaration

    Swift

    public func height(_ value: CGFloat?) -> Flex
  • The value specifies the view’s height in percentage of its container height. The value must be non-negative. Example: view.flex.height(40%)

    Declaration

    Swift

    public func height(_ percent: FPercent) -> Flex
  • The value specifies view’s width and the height in pixels. Values must be non-negative.

    Declaration

    Swift

    public func size(_ size: CGSize?) -> Flex
  • The value specifies the width and the height of the view in pixels, creating a square view. Values must be non-negative.

    Declaration

    Swift

    public func size(_ sideLength: CGFloat) -> Flex
  • The value specifies the view’s minimum width in pixels. The value must be non-negative.

    Declaration

    Swift

    public func minWidth(_ value: CGFloat?) -> Flex
  • The value specifies the view’s minimum width in percentage of its container width. The value must be non-negative.

    Declaration

    Swift

    public func minWidth(_ percent: FPercent) -> Flex
  • The value specifies the view’s maximum width in pixels. The value must be non-negative.

    Declaration

    Swift

    public func maxWidth(_ value: CGFloat?) -> Flex
  • The value specifies the view’s maximum width in percentage of its container width. The value must be non-negative.

    Declaration

    Swift

    public func maxWidth(_ percent: FPercent) -> Flex
  • The value specifies the view’s minimum height in pixels. The value must be non-negative.

    Declaration

    Swift

    public func minHeight(_ value: CGFloat?) -> Flex
  • The value specifies the view’s minimum height in percentage of its container height. The value must be non-negative.

    Declaration

    Swift

    public func minHeight(_ percent: FPercent) -> Flex
  • The value specifies the view’s maximum height in pixels. The value must be non-negative.

    Declaration

    Swift

    public func maxHeight(_ value: CGFloat?) -> Flex
  • The value specifies the view’s maximum height in percentage of its container height. The value must be non-negative.

    Declaration

    Swift

    public func maxHeight(_ percent: FPercent) -> Flex
  • AspectRatio is a property introduced by Yoga that don’t exist in CSS. AspectRatio solves the problem of knowing one dimension of an element and an aspect ratio, this is very common when it comes to images, videos, and other media types. AspectRatio accepts any floating point value > 0, the default is undefined.

    Declaration

    Swift

    public func aspectRatio(_ value: CGFloat?) -> Flex

    Parameters

    value

    Return Value

  • AspectRatio is a property introduced by Yoga that don’t exist in CSS. AspectRatio solves the problem of knowing one dimension of an element and an aspect ratio, this is very common when it comes to images, videos, and other media types. AspectRatio accepts any floating point value > 0, the default is undefined.

    Declaration

    Swift

    public func aspectRatio(of imageView: UIImageView) -> Flex

    Parameters

    value

    Return Value

  • The position property tells Flexbox how you want your item to be positioned within its parent.

    Declaration

    Swift

    public func position(_ value: Position) -> Flex

    Parameters

    value

    Default value is .relative

  • Set the left edge distance from the container left edge in pixels.

    Declaration

    Swift

    public func left(_ value: CGFloat) -> Flex
  • Set the top edge distance from the container top edge in pixels.

    Declaration

    Swift

    public func top(_ value: CGFloat) -> Flex
  • Set the right edge distance from the container right edge in pixels.

    Declaration

    Swift

    public func right(_ value: CGFloat) -> Flex
  • Set the bottom edge distance from the container bottom edge in pixels.

    Declaration

    Swift

    public func bottom(_ value: CGFloat) -> Flex
  • Set the start edge (LTR=left, RTL=right) distance from the container start edge in pixels.

    Declaration

    Swift

    public func start(_ value: CGFloat) -> Flex
  • Set the end edge (LTR=right, RTL=left) distance from the container start edge in pixels.

    Declaration

    Swift

    public func end(_ value: CGFloat) -> Flex
  • Set the top margin. Top margin specify the offset the top edge of the item should have from from it’s closest sibling (item) or parent (container).

    Declaration

    Swift

    public func marginTop(_ value: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func marginTop(_ percent: FPercent) -> Flex
  • Set the left margin. Left margin specify the offset the left edge of the item should have from from it’s closest sibling (item) or parent (container).

    Declaration

    Swift

    public func marginLeft(_ value: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func marginLeft(_ percent: FPercent) -> Flex
  • Set the bottom margin. Bottom margin specify the offset the bottom edge of the item should have from from it’s closest sibling (item) or parent (container).

    Declaration

    Swift

    public func marginBottom(_ value: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func marginBottom(_ percent: FPercent) -> Flex
  • Set the right margin. Right margin specify the offset the right edge of the item should have from from it’s closest sibling (item) or parent (container).

    Declaration

    Swift

    public func marginRight(_ value: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func marginRight(_ percent: FPercent) -> Flex
  • Set the start margin.

    Depends on the item LayoutDirection:

    • In LTR direction, start margin specify the offset the left edge of the item should have from from it’s closest sibling (item) or parent (container).
    • IN RTL direction, start margin specify the offset the right edge of the item should have from from it’s closest sibling (item) or parent (container).

    Declaration

    Swift

    public func marginStart(_ value: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func marginStart(_ percent: FPercent) -> Flex
  • Set the end margin.

    Depends on the item LayoutDirection:

    • In LTR direction, end margin specify the offset the right edge of the item should have from from it’s closest sibling (item) or parent (container).
    • IN RTL direction, end margin specify the offset the left edge of the item should have from from it’s closest sibling (item) or parent (container).

    Declaration

    Swift

    public func marginEnd(_ value: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func marginEnd(_ percent: FPercent) -> Flex
  • Set the left, right, start and end margins to the specified value.

    Declaration

    Swift

    public func marginHorizontal(_ value: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func marginHorizontal(_ percent: FPercent) -> Flex
  • Set the top and bottom margins to the specified value.

    Declaration

    Swift

    public func marginVertical(_ value: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func marginVertical(_ percent: FPercent) -> Flex
  • Set all margins using UIEdgeInsets. This method is particularly useful to set all margins using iOS 11 UIView.safeAreaInsets.

    Declaration

    Swift

    public func margin(_ insets: UIEdgeInsets) -> Flex
  • Set all margins to the specified value.

    Declaration

    Swift

    public func margin(_ value: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func margin(_ percent: FPercent) -> Flex
  • Set the individually top, left, bottom and right margins.

    Declaration

    Swift

    public func margin(_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat) -> Flex
  • Undocumented

    Declaration

    Swift

    public func margin(_ top: FPercent, _ left: FPercent, _ bottom: FPercent, _ right: FPercent) -> Flex
  • Set the top padding. Top padding specify the offset children should have from the container’s top edge.

    Declaration

    Swift

    public func paddingTop(_ value: CGFloat) -> Flex
  • Set the left padding. Left padding specify the offset children should have from the container’s left edge.

    Declaration

    Swift

    public func paddingLeft(_ value: CGFloat) -> Flex
  • Set the bottom padding. Bottom padding specify the offset children should have from the container’s bottom edge.

    Declaration

    Swift

    public func paddingBottom(_ value: CGFloat) -> Flex
  • Set the top padding. Top padding specify the offset children should have from the container’s top edge.

    Declaration

    Swift

    public func paddingRight(_ value: CGFloat) -> Flex
  • Set the start padding.

    Depends on the item LayoutDirection:

    • In LTR direction, start padding specify the offset children should have from the container’s left edge.
    • IN RTL direction, start padding specify the offset children should have from the container’s right edge.

    Declaration

    Swift

    public func paddingStart(_ value: CGFloat) -> Flex
  • Set the end padding.

    Depends on the item LayoutDirection:

    • In LTR direction, end padding specify the offset children should have from the container’s right edge.
    • IN RTL direction, end padding specify the offset children should have from the container’s left edge.

    Declaration

    Swift

    public func paddingEnd(_ value: CGFloat) -> Flex
  • Set the left, right, start and end paddings to the specified value.

    Declaration

    Swift

    public func paddingHorizontal(_ value: CGFloat) -> Flex
  • Set the top and bottom paddings to the specified value.

    Declaration

    Swift

    public func paddingVertical(_ value: CGFloat) -> Flex
  • Set paddings using UIEdgeInsets. This method is particularly useful to set all paddings using iOS 11 UIView.safeAreaInsets.

    Declaration

    Swift

    public func padding(_ insets: UIEdgeInsets) -> Flex
  • Set all paddings to the specified value.

    Declaration

    Swift

    public func padding(_ value: CGFloat) -> Flex
  • Set the individually top, left, bottom and right paddings.

    Declaration

    Swift

    public func padding(_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat) -> Flex
  • Set the view background color.

    Declaration

    Swift

    public func backgroundColor(_ color: UIColor) -> Flex

    Parameters

    color

    new color

    Return Value

    flex interface