Flex
The Flex component can be used to layout its children with Flexbox. The
component can be customized with flexbox props.
More information about Flexbox.
Import
import { Flex } from '@dynatrace/strato-components-preview/layouts-core';
Use cases
Flex props
In the example below the flexDirection prop is used. The same approach can be
used for other flexbox properties.
Flex item
The prop flexItem can be set on any Flex component to mark it as a child of
another Flex component. When a Flex component is set to flexItem, properties
for flexbox items can be used on that component.
Props
FlexProps
Signature:
export declare type FlexProps<E extends > = <E, >;FlexOwnProps
Signature:
export declare type FlexOwnProps = & & ;LayoutProps
extends
, , , PaddingProps
| Name | Type | Default | Description |
|---|---|---|---|
padding? | 8 | ||
p? | - | ||
paddingX? | - | ||
px? | - | ||
paddingY? | - | ||
py? | - | ||
paddingTop? | - | ||
pt? | - | ||
paddingRight? | - | ||
pr? | - | ||
paddingBottom? | - | ||
pb? | - | ||
paddingLeft? | - | ||
pl? | - |
MarginProps
| Name | Type | Default | Description |
|---|---|---|---|
margin? | 0 | ||
m? | - | ||
marginX? | - | ||
mx? | - | ||
marginY? | - | ||
my? | - | ||
marginTop? | - | ||
mt? | - | ||
marginRight? | - | ||
mr? | - | ||
marginBottom? | - | ||
mb? | - | ||
marginLeft? | - | ||
ml? | - |
LayoutSizeCSS
Signature:
export declare type LayoutSizeCSS = <, | | | | | >;Still have questions?
Find answers in the Dynatrace Community