This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Flex

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

Table of contents

How to use Flex

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.
  • 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';

Code examples

Margins & Paddings

Flex components 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.

Real-world example

Props

NameRequiredDefaultTypeDescription
alignContentAlignContentDefines how each line is aligned within a flexbox/grid container.
alignItemsAlignItemsDefines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.
alignSelfAlignItemsWorks like align-items, but applies only to a single flexbox item, instead of all of them.
flexFlex<0 | (string & {})>A shorthand property for flex-grow, flex-shrink, flex-basis
flexBasisFlexBasis<0 | (string & {})>Defines the initial size of a flexbox item.
flexDirectionFlexDirectionDefines how flexbox items are ordered within a flexbox container.
flexGrowFlexGrowDefines how much a flexbox item should grow if there's space available.
flexShrinkFlexShrinkDefines how much a flexbox item should shrink if there's not enough space available.
flexWrapFlexWrapDefines 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%
gapstringDefines a gap between flexbox items.
isInline
false
true
Sets display: inline-flex
justifyContentJustifyContentDefines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.
justifyItemsJustifyContentDefines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
justifySelfJustifySelfSets the way a box is justified inside its alignment container along the appropriate axis.
marginSpacingsets margin to one of the corresponding spacing tokens
marginBottomSpacingsets margin-bottom to one of the corresponding spacing tokens
marginLeftSpacingsets margin-left to one of the corresponding spacing tokens
marginRightSpacingsets margin-right to one of the corresponding spacing tokens
marginTopSpacingsets margin-top to one of the corresponding spacing tokens
orderOrderDefines the order of a flexbox item
paddingSpacingsets padding to one of the corresponding spacing tokens
paddingBottomSpacingsets padding-bottom to one of the corresponding spacing tokens
paddingLeftSpacingsets padding-left to one of the corresponding spacing tokens
paddingRightSpacingsets padding-right to one of the corresponding spacing tokens
paddingTopSpacingsets padding-top to one of the corresponding spacing tokens
asHTML Tag or React Component, e.g. div, span, etc.
childrenReactNodeChild nodes to be rendered in the component
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes