---
url: /card-guides/flexible-container.md
description: >-
  The flexible container is a Container component that utilises Flexbox CSS
  rules to allow for more flexible customisation of properties such as
  alignment.
---

# 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) 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](https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg) 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.