A Swift YogaKit Guide to Flexbox

How can we use Flexbox to create great layouts?

Steven Curtis
Aug 12 · 4 min read

Prerequisites:

  • Some basic Auto Layout knowledge
  • Some knowledge of CocoaPods

Background

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)

Display

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:

against:


flex-direction

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.


flex-wrap

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:


flex-flow

A shorthand for flex-direction and flex-wrap does not exist in FlexLayout

justify-content

The following is applicable for rows:

align-items

align-content

Properties for the Children (flex items)

order

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.

flex-grow

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).

flex-shrink

flex-basis

Rlex-basis controls how large an element will be along the main-axis before any growing or shrinking occurs.

flex

A combination of grow and shrink that does not seem to exist in Flex-Layout

align-self

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

stevecurtis.me

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