Flex

Last updated: 2.0.0 (21/01/2024)

The Flex component is one of the most used components of the Valence library, and provides a direct interface to the CSS flex attributes via the component's props.

Usage

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

function MyComponent() { 
    return ( 
        <Flex
            direction="row"
            align="center"
            justify="center"
            alignSelf="flex-start"
            gap={5}
            grow
            width={200}
            height={200}
            padding={20}
            margin={10}
        >
            // Flex children...
        </Flex>
    )
}

Props

Extends GenericLayoutProps and PolymorphicLayoutProps.

Property	Type	Description
direction	CSSProperties["flexDirection"]	Sets flex-direction css property.
align	CSSProperties["alignItems"]	Sets align-items css property.
justify	CSSProperties["justifyContent"]	Sets justify-content css property.
alignSelf	CSSProperties["alignSelf"]	Sets align-self css property.
gap	CSSProperties["gap"]	Sets gap css property.
wrap	CSSProperties["flexWrap"]	Sets the flex-wrap property.
grow	boolean	Shorthand for flex-grow = 1.
center	boolean	A shorthand property that sets both align and justify to center.