Flex

Flex component is a [Box] with display: flex and abilities to apply other flexbox CSS properties via properties of the component.

The Flex component is useful because it helps with several common cases: create a one direction layout (vertical or horizontal) with uses Forma 36 spacing system; and compose new component and allow to override element using the as property.

Import

import { Flex } from '@contentful/f36-components';
// or
import { Flex } from '@contentful/f36-core';

Examples

Margins & Paddings

Flex component inherits behaviour of Box component and allows to pass margins and paddings that are based on our spacing system.

To control the behaviour of the Flex component you can use specific properties that match all main Flexbox related CSS attributes.

Nesting

This example shows how you can nest flexboxes to create more complicated layouts. It also uses the flexGrow prop on one of the children to expand it to fill the repaining space.

Alignment

The alignItems prop can be used to align items along the cross axis. When direction is column, this refers to horizontal alignment, and when direction is row it refers to vertical alignment.

This example horizontally centers items in a vertical stack.

Justification

The justifyContent prop can be used to align items along the main axis. When direction is column, this refers to vertical alignment, and when direction is row it refers to horizontal alignment.

This example vertically centers the stack of items within the available space defined by a container.

Using Flex to align other Forma components

Props (API reference)

Name

Type

Default

alignContent
"end"
string & {}
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"

Defines how each line is aligned within a flexbox/grid container.

alignItems
"end"
string & {}
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"

Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.

alignSelf
"end"
string & {}
"baseline"
"inherit"
"initial"
"start"
"center"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"

Works like align-items, but applies only to a single flexbox item, instead of all of them.

as
HTML Tag or React Component (e.g. div, span, etc)

children
ReactNode

Child nodes to be rendered in the component

className
string

CSS class to be appended to the root element

flex
0
string & {}
"none"
"auto"
"inherit"
"initial"
"content"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"fit-content"
"max-content"
"min-content"
number & {}

A shorthand property for flex-grow, flex-shrink, flex-basis

flexBasis
0
string & {}
"auto"
"inherit"
"initial"
"content"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"fit-content"
"max-content"
"min-content"
"-moz-fit-content"
"-moz-max-content"
"-moz-min-content"
"-webkit-auto"

Defines the initial size of a flexbox item.

flexDirection
"row"
"inherit"
"initial"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"column"
"column-reverse"
"row-reverse"

Defines how flexbox items are ordered within a flexbox container.

flexGrow
string & {}
"inherit"
"initial"
"-moz-initial"
"revert"
"revert-layer"
"unset"
number & {}

Defines how much a flexbox item should grow if there's space available.

flexShrink
string & {}
"inherit"
"initial"
"-moz-initial"
"revert"
"revert-layer"
"unset"
number & {}

Defines how much a flexbox item should shrink if there's not enough space available.

flexWrap
"inherit"
"initial"
"wrap"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"nowrap"
"wrap-reverse"

Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.

fullHeight
false
true

Sets height: 100%

fullWidth
false
true

Sets width: 100%

gap
string

Defines a gap between flexbox items.

isInline
false
true

Sets display: inline-flex

justifyContent
"end"
string & {}
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"

Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.

justifyItems
"end"
string & {}
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"space-around"
"space-between"
"space-evenly"
"stretch"
"flex-end"
"flex-start"
"normal"

Defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

justifySelf
"end"
string & {}
"auto"
"baseline"
"inherit"
"initial"
"start"
"left"
"center"
"right"
"-moz-initial"
"revert"
"revert-layer"
"unset"
"stretch"
"flex-end"
"flex-start"
"normal"
"self-end"
"self-start"

Sets the way a box is justified inside its alignment container along the appropriate axis.

margin
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin to one of the corresponding spacing tokens

marginBottom
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-bottom to one of the corresponding spacing tokens

marginLeft
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-left to one of the corresponding spacing tokens

marginRight
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-right to one of the corresponding spacing tokens

marginTop
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-top to one of the corresponding spacing tokens

order
string & {}
"inherit"
"initial"
"-moz-initial"
"revert"
"revert-layer"
"unset"
number & {}

Defines the order of a flexbox item

padding
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding to one of the corresponding spacing tokens

paddingBottom
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-bottom to one of the corresponding spacing tokens

paddingLeft
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-left to one of the corresponding spacing tokens

paddingRight
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-right to one of the corresponding spacing tokens

paddingTop
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets padding-top to one of the corresponding spacing tokens

testId
string

A [data-test-id] attribute used for testing purposes