FlexLayout Docs (91% documented)
FlexLayout Reference Flex Class Reference
publicclassFlex
FlexLayout interface.
The interface is accessible from any UIView class instance:
label.flex.margin(10)
Flex items’s UIView.
Swift
publicletview:UIView
Item natural size, considering only properties of the view itself. Independent of the item frame.
Swift
publicvarintrinsicSize:CGSize
This method adds a flex item (UIView) to a flex container. Internally the methods adds the UIView has subviews and enables flexbox.
Swift
publicfuncaddItem()->Flex
The added view flex interface
This method is similar toaddItem(: UIView)
except that it also creates the flex item’s UIView. Internally the method creates anUIView, 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.
Swift
publicfuncaddItem(_view:UIView)->Flex
view | view to add to the flex container |
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 asingle parameter calledflex
. This parameter is in fact, the view’s flex interface, it can be used to adds other flex itemsand containers.
Swift
publicfuncdefine(_closure:(_flex:Flex)->Void)->Flex
closure |
Flex interface
The method layout the flex container’s children
Swift
publicfunclayout(mode:LayoutMode=.fitContainer)
mode | specify the layout mod (LayoutMode). |
This property controls dynamically if a flexbox’s UIView is included or not in the flexbox layouting. When aflexbox’s UIView is excluded, FlexLayout won’t layout the view and its children views.
Swift
publicvarisIncludedInLayout:Bool=true
This method controls dynamically if a flexbox’s UIView is included or not in the flexbox layouting. When aflexbox’s UIView is excluded, FlexLayout won’t layout the view and its children views.
Swift
publicfuncisIncludedInLayout(_included:Bool)->Flex
included | true to layout the view |
The framework is so highly optimized, that flex item are layouted only when a flex property is changed and when flex containersize change. In the event that you want to force FlexLayout to do a layout of a flex item, you can mark it as dirty usingmarkDirty()
.
Dirty flag propagates to the root of the flexbox tree ensuring that when any item is invalidated its whole subtree will be re-calculated
Swift
publicfuncmarkDirty()->Flex
Flex interface
Returns the item size when layouted in the specified frame size
Swift
publicfuncsizeThatFits(size:CGSize)->CGSize
size | frame size |
item size
Thedirection
property establishes the main-axis, thus defining the direction flex items are placed in the flex container.
Thedirection
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 (seelayoutDirection
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.
Swift
publicfuncdirection(_value:Direction)->Flex
value | Default value is .column |
Thewrap
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.
Swift
publicfuncwrap(_value:Wrap)->Flex
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.
Swift
publicfunclayoutDirection(_value:LayoutDirection)->Flex
value | new LayoutDirection |
ThejustifyContent
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.
Swift
publicfuncjustifyContent(_value:JustifyContent)->Flex
value | Default value is .start |
ThealignItems
property defines how flex items are laid out along the cross axis on the current line.Similar tojustifyContent
but for the cross-axis (perpendicular to the main-axis). For example, ifchildren are flowing vertically,alignItems
controls how they align horizontally.
Swift
publicfuncalignItems(_value:AlignItems)->Flex
value | Default value is .stretch |
ThealignSelf
property controls how a child aligns in the cross direction, overriding thealignItems
of the parent. For example, if children are flowing vertically,alignSelf
will control how the flex item will align horizontally.
Swift
publicfuncalignSelf(_value:AlignSelf)->Flex
value | Default value is .auto |
The align-content property aligns a flex container’s lines within the flex container when there is extra spacein the cross-axis, similar to how justifyContent aligns individual items within the main-axis.
Swift
publicfuncalignContent(_value:AlignContent)->Flex
value | Default value is .start |
Thegrow
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.
Swift
publicfuncgrow(_value:CGFloat)->Flex
value | Default value is 0 |
It specifies theflex 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 flexbasis
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.
Swift
publicfuncshrink(_value:CGFloat)->Flex
value | Default value is 1 |
This property takes the same values as the width and height properties, and specifies the initial size of theflex item, before free space is distributed according to the grow and shrink factors.
Specifyingnil
set the basis asauto
, 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.
Swift
publicfuncbasis(_value:CGFloat?)->Flex
value | Default value is 0 |
The value specifies the view’s width in pixels. The value must be non-negative.
Swift
publicfuncwidth(_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%)
Swift
publicfuncwidth(_percent:FPercent)->Flex
The value specifies the view’s height in pixels. The value must be non-negative.
Swift
publicfuncheight(_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%)
Swift
publicfuncheight(_percent:FPercent)->Flex
The value specifies view’s width and the height in pixels. Values must be non-negative.
Swift
publicfuncsize(_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.
Swift
publicfuncsize(_sideLength:CGFloat)->Flex
The value specifies the view’s minimum width in pixels. The value must be non-negative.
Swift
publicfuncminWidth(_value:CGFloat?)->Flex
The value specifies the view’s minimum width in percentage of its container width. The value must be non-negative.
Swift
publicfuncminWidth(_percent:FPercent)->Flex
The value specifies the view’s maximum width in pixels. The value must be non-negative.
Swift
publicfuncmaxWidth(_value:CGFloat?)->Flex
The value specifies the view’s maximum width in percentage of its container width. The value must be non-negative.
Swift
publicfuncmaxWidth(_percent:FPercent)->Flex
The value specifies the view’s minimum height in pixels. The value must be non-negative.
Swift
publicfuncminHeight(_value:CGFloat?)->Flex
The value specifies the view’s minimum height in percentage of its container height. The value must be non-negative.
Swift
publicfuncminHeight(_percent:FPercent)->Flex
The value specifies the view’s maximum height in pixels. The value must be non-negative.
Swift
publicfuncmaxHeight(_value:CGFloat?)->Flex
The value specifies the view’s maximum height in percentage of its container height. The value must be non-negative.
Swift
publicfuncmaxHeight(_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 othermedia types. AspectRatio accepts any floating point value > 0, the default is undefined.
Swift
publicfuncaspectRatio(_value:CGFloat?)->Flex
value |
AspectRatio is a property introduced by Yoga that don’t exist in CSS. AspectRatio solves the problem of knowingone dimension of an element and an aspect ratio, this is very common when it comes to images, videos, and othermedia types. AspectRatio accepts any floating point value > 0, the default is undefined.
Swift
publicfuncaspectRatio(ofimageView:UIImageView)->Flex
value |
The position property tells Flexbox how you want your item to be positioned within its parent.
Swift
publicfuncposition(_value:Position)->Flex
value | Default value is .relative |
Set the left edge distance from the container left edge in pixels.
Swift
publicfuncleft(_value:CGFloat)->Flex
Set the top edge distance from the container top edge in pixels.
Swift
publicfunctop(_value:CGFloat)->Flex
Set the right edge distance from the container right edge in pixels.
Swift
publicfuncright(_value:CGFloat)->Flex
Set the bottom edge distance from the container bottom edge in pixels.
Swift
publicfuncbottom(_value:CGFloat)->Flex
Set the start edge (LTR=left, RTL=right) distance from the container start edge in pixels.
Swift
publicfuncstart(_value:CGFloat)->Flex
Set the end edge (LTR=right, RTL=left) distance from the container start edge in pixels.
Swift
publicfuncend(_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).
Swift
publicfuncmarginTop(_value:CGFloat)->Flex
Undocumented
Swift
publicfuncmarginTop(_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).
Swift
publicfuncmarginLeft(_value:CGFloat)->Flex
Undocumented
Swift
publicfuncmarginLeft(_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).
Swift
publicfuncmarginBottom(_value:CGFloat)->Flex
Undocumented
Swift
publicfuncmarginBottom(_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).
Swift
publicfuncmarginRight(_value:CGFloat)->Flex
Undocumented
Swift
publicfuncmarginRight(_percent:FPercent)->Flex
Set the start margin.
Depends on the itemLayoutDirection
:
Swift
publicfuncmarginStart(_value:CGFloat)->Flex
Undocumented
Swift
publicfuncmarginStart(_percent:FPercent)->Flex
Set the end margin.
Depends on the itemLayoutDirection
:
Swift
publicfuncmarginEnd(_value:CGFloat)->Flex
Undocumented
Swift
publicfuncmarginEnd(_percent:FPercent)->Flex
Set the left, right, start and end margins to the specified value.
Swift
publicfuncmarginHorizontal(_value:CGFloat)->Flex
Undocumented
Swift
publicfuncmarginHorizontal(_percent:FPercent)->Flex
Set the top and bottom margins to the specified value.
Swift
publicfuncmarginVertical(_value:CGFloat)->Flex
Undocumented
Swift
publicfuncmarginVertical(_percent:FPercent)->Flex
Set all margins using UIEdgeInsets.This method is particularly useful to set all margins using iOS 11UIView.safeAreaInsets
.
Swift
publicfuncmargin(_insets:UIEdgeInsets)->Flex
Set all margins to the specified value.
Swift
publicfuncmargin(_value:CGFloat)->Flex
Undocumented
Swift
publicfuncmargin(_percent:FPercent)->Flex
Set the individually top, left, bottom and right margins.
Swift
publicfuncmargin(_top:CGFloat,_left:CGFloat,_bottom:CGFloat,_right:CGFloat)->Flex
Undocumented
Swift
publicfuncmargin(_top:FPercent,_left:FPercent,_bottom:FPercent,_right:FPercent)->Flex
Set the top padding. Top padding specify theoffset children should have from the container’s top edge.
Swift
publicfuncpaddingTop(_value:CGFloat)->Flex
Set the left padding. Left padding specify theoffset children should have from the container’s left edge.
Swift
publicfuncpaddingLeft(_value:CGFloat)->Flex
Set the bottom padding. Bottom padding specify theoffset children should have from the container’s bottom edge.
Swift
publicfuncpaddingBottom(_value:CGFloat)->Flex
Set the top padding. Top padding specify theoffset children should have from the container’s top edge.
Swift
publicfuncpaddingRight(_value:CGFloat)->Flex
Set the start padding.
Depends on the itemLayoutDirection
:
Swift
publicfuncpaddingStart(_value:CGFloat)->Flex
Set the end padding.
Depends on the itemLayoutDirection
:
Swift
publicfuncpaddingEnd(_value:CGFloat)->Flex
Set the left, right, start and end paddings to the specified value.
Swift
publicfuncpaddingHorizontal(_value:CGFloat)->Flex
Set the top and bottom paddings to the specified value.
Swift
publicfuncpaddingVertical(_value:CGFloat)->Flex
Set paddings using UIEdgeInsets.This method is particularly useful to set all paddings using iOS 11UIView.safeAreaInsets
.
Swift
publicfuncpadding(_insets:UIEdgeInsets)->Flex
Set all paddings to the specified value.
Swift
publicfuncpadding(_value:CGFloat)->Flex
Set the individually top, left, bottom and right paddings.
Swift
publicfuncpadding(_top:CGFloat,_left:CGFloat,_bottom:CGFloat,_right:CGFloat)->Flex
Set the view background color.
Swift
publicfuncbackgroundColor(_color:UIColor)->Flex
color | new color |
flex interface
Swift
publicenumDirection
Swift
publicenumJustifyContent
Swift
publicenumAlignContent
Swift
publicenumAlignItems
Swift
publicenumAlignSelf
Swift
publicenumWrap
Swift
publicenumPosition
Swift
publicenumLayoutDirection
Defines how thelayout(mode:)
method layout its flex items.
Swift
publicenumLayoutMode
© 2017lucdion. All rights reserved. (Last updated: 2017-12-10)
Generated byjazzy ♪♫ v0.9.0, aRealm project.