Skip to main content

    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.

    OverviewProperties

    FlexProps

    Signature:

    export declare type FlexProps<E extends > = <E, >;

    FlexOwnProps

    Signature:

    export declare type FlexOwnProps = & & & & ;

    FlexStyleProps

    extends, , , ,
    NameTypeDefaultDescription
    order?
    .[]
    		-

    Defines order

    flexGrow?
    .[]
    		-

    Defines flex grow

    flexShrink?
    .[]
    		-

    Defines flex shrink

    flexBasis?
    .[]
    		-

    Defines flex basis

    flex?
    .[]
    		-

    Defines flex

    flexDirection?
    .[]
    		-

    Defines flex direction

    flexWrap?
    .[]
    		-

    Defines flex wrap

    flexFlow?
    .[]
    		-

    Defines flex flow

    gridColumnStart?
    .[]
    		-

    Defines grid column start

    gridColumnEnd?
    .[]
    		-

    Defines grid column end

    gridRowStart?
    .[]
    		-

    Defines grid row start

    gridRowEnd?
    .[]
    		-

    Defines grid row end

    gridColumn?
    .[]
    		-

    Defines grid column

    gridRow?
    .[]
    		-

    Defines grid row

    gridArea?
    .[]
    		-

    Defines grid area

    GridFlexPositionProps

    NameTypeDefaultDescription
    justifySelf?
    		-

    justify self positions

    alignSelf?
    		-

    align self positions

    placeSelf?
    		-

    place self positions

    justifyItems?
    		-

    justify items positions

    alignItems?
    		-

    align items positions

    placeItems?
    		-

    place items positions

    justifyContent?
    		-

    justify content positions

    alignContent?
    		-

    align content positions

    placeContent?
    		-

    place content positions

    GapProps

    NameTypeDefaultDescription
    gap?
    		-

    Defines gap

    rowGap?
    		-

    Defines row gap

    columnGap?
    		-

    Defines column gap

    LayoutSizeProps

    NameTypeDefaultDescription
    width?
    []
    		-

    CSS width property

    minWidth?
    []
    		-

    CSS min width property

    maxWidth?
    []
    		-

    CSS max width property

    height?
    []
    		-

    CSS height property

    minHeight?
    []
    		-

    CSS min height property

    maxHeight?
    []
    		-

    CSS max height property

    SpacingProps

    NameTypeDefaultDescription
    padding?
    		-

    Defines CSS padding property

    p?
    		-

    Defines CSS padding property

    paddingX?
    		-

    Defines CSS x padding property

    px?
    		-

    Defines CSS x padding property

    paddingY?
    		-

    Defines CSS y padding property

    py?
    		-

    Defines CSS y padding property

    paddingTop?
    		-

    Defines CSS top padding property

    pt?
    		-

    Defines CSS top padding property

    paddingRight?
    		-

    Defines CSS right padding property

    pr?
    		-

    Defines CSS right padding property

    paddingBottom?
    		-

    Defines CSS bottom padding property

    pb?
    		-

    Defines CSS bottom padding property

    paddingLeft?
    		-

    Defines CSS left padding property

    pl?
    		-

    Defines CSS left padding property

    margin?
    		-

    Defines CSS margin property

    m?
    		-

    Defines CSS margin property

    marginX?
    		-

    Defines CSS x margin property

    mx?
    		-

    Defines CSS x margin property

    marginY?
    		-

    Defines CSS y margin property

    my?
    		-

    Definesy CSS margin property

    marginTop?
    		-

    Defines CSS top margin property

    mt?
    		-

    Defines CSS top margin property

    marginRight?
    		-

    Defines CSS right margin property

    mr?
    		-

    Defines CSS right margin property

    marginBottom?
    		-

    Defines CSS bottom margin property

    mb?
    		-

    Defines bottom margin property

    marginLeft?
    		-

    Defines CSS left margin property

    ml?
    		-

    Defines CSS left margin property

    FlexItemStyleProps

    NameTypeDefaultDescription
    flexItem?
    		-

    Determines whether this is a flex item. If true, display: 'flex' style will not be added.

    Still have questions?
    Find answers in the Dynatrace Community