FlowLayout

FlowLayout

FlowLayout is similar to UICollectionViewFlowLayout where it aligns items in row by row, from left to right, top to bottom.

Spacing

• interItemSpacing is the space between two cells within the same row

• lineSpacing is the space between two rows

  When constructing a FlowLayout, you can also specify a spacing parameter which will apply to both interItemSpacing and lineSpacing.

Flexbox

FlowLayout also support some of the Flexbox properties. These include justifyContent, alignItems, and alignContent.

justifyContent

• justifyContent tells FlowLayout how to handle horizontal empty spaces within a row. This happens when all the cells with in a row including their spacing doesn’t fill the entire row.

  • .start (default): cells are packed toward the left
  • .end: cells are packed toward to the right
  • .center: cells are centered along the line
  • .spaceBetween: cells are evenly distributed in the line; first cell is on the left, last cell on the right
  • .spaceAround: cells are evenly distributed in the line with equal space around them
  • .spaceEvenly: cells are distributed so that the spacing between any two adjacent cells, before the first cell, and after the last cell is the same

alignItems

• alignItems tells FlowLayout how to handle vertical spacing with in a row. Note that if all the cells with in a row have the same height, alignItems does nothing. It only applies to cells that are not the tallest within a row.

  • .start (default): items are packed towards the top of the row
  • .end: items are packed towards the bottom of the row
  • .center: items are centered vertically within a row
  • .stretch: stretch to fill the row

alignContent

• alignContent is similar to justifyContent. But it handles the vertical empty spaces within a collection. FlowLayout use this value to distribute rows in the vertical axis if all the rows cannot fill the entire vertical space.

  • .start (default): rows are packed toward the top
  • .end: rows are packed toward to the bottom
  • .center: rows are centered along the vertical axis
  • .spaceBetween: rows are evenly distributed in the vertical space; first row is on the top, last row on the bottom
  • .spaceAround: rows are evenly distributed in the vertical space with equal space around them
  • .spaceEvenly: rows are distributed so that the spacing between any two adjacent rows, before the first row, and after the last row is the same