A Swift YogaKit Guide to Flexbox
How can we use Flexbox to create great layouts?
- Some basic Auto Layout knowledge
- Some knowledge of CocoaPods
The examples below use a define closure to match the flexbox structure. There is (in truth) little difference between using a closure and define() or not.
Basics & Terminology
Properties for the Parent (flex container)
In my code example (link at the bottom of the page) there are examples of this in a view, and placed first in a ScrollView. However, the general code for this is relatively easy without this:
As a flex-direction example it is possible to use a set of UIViews that are in horizontal and vertical form.
The following is a good example of this, and also shows how loops can be used within the flexboxes.
Known as wrap in FlexLayout, this is applied to containers and has one of the four values:
These are described through the following screenshots:
A shorthand for flex-direction and flex-wrap does not exist in FlexLayout
The following is applicable for rows:
Properties for the Children (flex items)
Unfortunately FlexLayout does not support the order property. The order is determined by the flex container’s UIView.subviews array.
That is, by using define the source code structure matches the flexbox structure, so within a block just move flex item line up or down to change the flex item order.
Grow has a default of zero, and this means that items are not allowed to expand. A value of 1 overrides the width and allows the item to grow. Larger values increases the propensity to expand (so 2 expands at double the rate of 1).
Rlex-basis controls how large an element will be along the main-axis before any growing or shrinking occurs.
A combination of grow and shrink that does not seem to exist in Flex-Layout
This allows the default alignment (or the one specified by
align-items) to be overridden for individual flex items.
A git repo:
A guide to YogaKit Flexbox using Swift. Contribute to stevencurtis/SwiftYogaKitFlexbox development by creating an…
Want to get in contact? Try the link here: