Flex Center

Last updated: 3.0.0 (04/07/2024)

The Flex Center component is designed to create a Flex that is centered within its parent component. Under the hood, it uses two Flex components, an "inner" and "outer", to achieve this style.

Usage

import { FlexCenter } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <FlexCenter>
            // Flex children...
        </FlexCenter>
    )
}

Props

Extends FlexProps.

Property	Type	Description
innerWidth	FlexProps["width"]	Width of the inner Flex component. Defaults to 50%.
innerProps	Omit<FlexProps, "children">	Optional props to pass to the inner Flex component.