Skip to main content

Layout System with Flexbox

Litho uses the Yoga library, which is an implementation of Flexbox, to measure and layout on-screen components. If you have used Flexbox on the web before then this should be very familiar. If you are more familiar with how Android normally performs Layout then Flexbox will remind you of LinearLayout.

Flexbox attributes​

This section shows how various attributes of Flexbox are used for on-screen layout.

Layout direction​

Flexbox is a one-dimensional layout model, which means all elements are placed along one line.

The following information may help you decide whether to layout your elements horizontally or vertically.

The primary axis of layout is called the Main Axis, and the direction perpendicular to it is called the Cross Axis. For example, if you wanted your children to be laid out left to right, then the Main Axis would be the horizontal axis, and the Cross Axis would be the vertical axis.

Litho uses special container components to define the direction of the layout, as shown in the following table.

ComponentMain AxisChild Elements LayoutIf Wrapping is Enabled
Rowhorizontalleft to rightNext line will start under the first item on the left of the container.
Row (reverse)horizontalright to leftNext line will start under the first item on the right of the container.
Columnverticaltop to bottomNext line will start to the right of the first item on the top of the container.
Column (reverse)verticalbottom to topNext line will start to the right of the first item on the bottom of the container.

The above container components are illustrated in the following diagram.

flex-direction
note

The (reverse) option is available through the .reverse(boolean) method on Row/Column objects.

Distribution along the main axis​

If your container has more space than is necessary along the Main Axis then the way children are positioned across that axis needs to be considered.

The justifyContent method specifies how the child elements are distributed across the Main Axis. It takes a YogaJustify enum input, which has the following possible values:

  • FLEX_START (default) - position children at the start of the container, along the main axis.
  • FLEX_END - position children at the end of the container, along the main axis.
  • CENTER - position children in the centre of the container, along the main axis.
  • SPACE_BETWEEN - distribute extra space evenly between children.
  • SPACE_AROUND - distribute space evenly around each child. Note that adjacent children will have '2x' space between them (because each child has its own 'padding').
  • SPACE_EVENLY - distribute space evenly around all children.

The YogaJustify values are illustrated below.

justify-content

Distribution along the cross axis​

If the elements in your line have different heights, then the way they are positioned along the line needs to be considered.

The alignItems method specifies how the container's children are distributed across the Cross Axis. It takes a YogaAlign enum input, which has the following possible values:

  • STRETCH (default) - stretch the size of all elements to completely fill the line.
  • FLEX_START - align elements with the start of the cross axis.
  • FLEX_END - align elements with the end of the cross axis.
  • CENTER - align elements with the centre of the line.
  • BASELINE - align elements with respect to their baselines.

The YogaAlign values are illustrated below.

align-items

Wrapping to multiple lines​

In addition to the one-dimensional Flexbox laying out its children in one line, Flexboxes can also wrap their children onto multiple lines, much like text wraps. You specify wrapping behavior with the Wrap method, which takes a YogaWrap enum value that has the following possible values:

  • NO_WRAP (default) - there is no wrapping. Children are forced into a single line; if they cannot fit, they will overflow.
  • WRAP - elements that overflow a single line will be moved to the next line. If the main axis is horizontal, then the next line will be below the previous line.
  • WRAP_REVERSE - similar to WRAP except the order of lines is reversed. If the main axis is horizontal, then the next line will be above the previous line.

The YogaWrap values are illustrated below.

wrap

Line distribution​

If your container has extra space in the Cross Axis direction, then the way lines are distributed in that space needs to be considered.

The alignContent method specifies how lines are distributed along the Cross Axis. It takes a YogaAlign enum value, which has the following possible values:

  • STRETCH (default) - lines are stretched evenly to fill the available space in the cross axis.
  • FLEX_START - lines are placed at the start of the cross axis.
  • FLEX_END - lines are placed at the end of the cross axis.
  • CENTER - lines are placed in the centre of the cross axis.
  • SPACE_BETWEEN - evenly distributes extra space between all lines.
  • SPACE_AROUND - pads lines above and below with extra space.

The YogaAlign values, for Lines, are illustrated below.

align-content

For more information on specific Flexbox properties, refer to the Yoga documentation or explore any web resource on how Flexbox functions.