Flexible Container

The flexible container is a Container component that utilises Flexbox CSS rules to allow for more flexible customisation of properties such as alignment. Other components can be placed within the Container and the properties within the Container enables additional cosmetic.

See flexbox documentation for more detailed information.

Common Use Properties

• Display Property

  • flex This treats the container like a full block element.

  I.e. If the container is small in width, it will continue to sit on its own row line in the composition. E.x. If there is a 40% width container before the felxible container in the card editor and the flexible container is 20% width, it will sit below the 40% width container.

  • inline-flex This enables the container to act like an inline element.

  I.e. If the container is small in width, if there is space for it to sit next to other elements that come before it in the order of elements rather than on its own, it will do that. E.x. If there is a 40% width container before the felxible container in the card editor and the flexible container is 20% width, it will sit next to the 40% width container.

• Direction Property Defines the direction of the which flex-items are placed in the flex container.

  • row Elements will display left to right, horizontally.

  • row-reverse Elements will display right to left, horizontally.

  • column Elements will display top to bottom, vertically.

  • column-reverse Elements will display bottom to top, vertically.

• Wrap Property Determines how container contents try to fit on a line.

  • nowrap All contents will try to fit onto one line.

  • wrap Contents will wrap onto multiple lines, from top to bottom.

  • wrap-reverse Contents will wrap onto multiple lines, from bottom to top.

• Justify Content Property Determines how contents are distributed within the container and spacing between items.

  • flex-start Contents are packed toward the start of the direction defined by the Direction property.

  • flex-end Contents are packed toward the end of the direction defined by the Direction property.

  • center Contents are centered.

  • space-between Contents are evenly distributed in the container. The first item will display at the start of the line and the last item will be at the end.

  • space-around Contents are evenly distributed. The space arond each item is the same.

  INFO

  Gaps between two items will appear bigger than gaps between an item and the edge of the container as each item has its own spacing wrapping around the entire item.*

  • space-evenly Contents are evenly distributed so that the spacing between any two items along with spacing between an item and the edge of the container are all equal.

• Align Items Property Determines where contents sit in the container according to the cross-axis.

  • stretch Contents stretch to fill the container.

  • flex-start Contents are placed at the start of the cross-axis.

  • flex-end Contents are placed at the end of the cross-axis.

  • center Contents are centered in the cross axis.

  • baseline Contents are aligned so their baselines align.

• Align Content Property This property is only in effect when the Wrap property is not set to nowrap. It aligns the lines (rows or columns) of content within the container in a similar fashion to the Justify Content property.

  • normal Contents remain in their default positions as no value has been set.

    See the Justify Content property for value definitions.

• Gap Property Adjusts spacing between content within the container. It does not affect the spacing between content and the edges of the container.

  Takes px, %, vh, vw, em values.

• Order Property If the flex container is a child of another flex container, the position of the container inside the parent can be changed according to the numerical input in this box.

  Example: If the selected flex container is the fifth child (with four other flex containers preceding it) of a flex container, by entering "1" it will appear in the place of the first flex container. The remaining 4 will shuffle down in order.

• Flex Grow Property Defines the ability for the flex container to grow if necessary. The number entered must be without a unit and acts as a proportion that dictates the amount of space inside the parent container it should take up.

• Flex Shrink Property Defines the ability for the flex container to shrink if necessary.

• Flex Basis Property Defines the default size of an element before the remaining space is distributed. See this graphic for help.

• Align Self Property Allows for individual flex containers within parent flex containers to have their alignment (by default defined by the Align Items Property) changed to something else.

  See the Align Items property for value definitions.