What is Flex Alignment?

Selecting the Flex option as the display type of a cell defines it as a flexible box, enabling any content contained in the cell to be easily aligned and/or spaced in a horizontal or vertical alignment.

When a container is using flex, the following properties become available in the Alignment properties panel:

• Direction
  Defines the direction within the container in which items will be aligned. Possible directions are row (horizontal) and column (vertical). There is also the option for a reversed row or column, which will order of items in the container from last to first.
• Justify Content
  Used to determine how items are spaced within the container. Possible values are:
  • Flexible Box Start
    Items stack next to each other at the beginning of the container.
  • Flexible Box End
    Items stack next to each other at the end of the container.
  • Center
    Items stack next to each other at the center of the container.
  • Space Between
    Items are evenly distributed between the beginning and the end of the container.
  • Space Around
    items are evenly distributed with equal space between them, with space equal to half of the amount of space between items before the first item and after the last item.
  • Space Evenly
    Items are distributed so that the space between each item, before the first item and after the last item, is the same.

  Flexible Box Start

  Flexible Box End

  Center

  Space Between

  Space Around

  Space Evenly

  Flexible Box Start + Direction: Column

  Flexible Box Start + Direction: Row Reverse

• Align Items
  Determines how items in a container are aligned on the axis perpendicular to the flex direction. If the items are aligned in a row, this will determine the vertical position of the row within the container. If the items are aligned in a column, this will determine the horizontal position of the column.
• Align Content
  Determines how items in a container are spaced if there are multiple rows/columns of items.
• Row Gap
  Adds space between rows. Can be defined in pixels or as a percentage value.
• Column Gap
  Adds space between columns . Can be defined in pixels or as a percentage value.