A Swift YogaKit Guide to Flexbox

How can we use Flexbox to create great layouts?

Steven Curtis
Aug 12 · 4 min read


  • 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:

  • noWrap
  • wrap
  • wrapReverse

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:

Want to get in contact? Try the link here:

The Startup

Medium's largest active publication, followed by +538K people. Follow to join our community.

Steven Curtis

Written by


The Startup

Medium's largest active publication, followed by +538K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade