Flex displays a container that has a display of flex.
Import
import { Flex } from "@prismane/core";
Usage
<Flex gap={fr(2)} h={100} w="100%"> <Flex bg={["base", 700]} w={120}> 1 </Flex> <Flex bg={["base", 700]} w={120}> 2 </Flex> </Flex>
<Flex gap={fr(2)} h={100} w="100%"> <Flex bg={["base", 700]} w={120}> 1 </Flex> <Flex bg={["base", 700]} grow> 2 </Flex> </Flex>
<Flex gap={fr(2)} h={100} w="100%" justify="between"> <Flex bg={["base", 700]} w={120}> 1 </Flex> <Flex bg={["base", 700]} w={120}> 2 </Flex> </Flex>
Versatile Component
<Flex as="strong" gap={fr(5)}> <Box>Hello</Box> <Box>World</Box> </Flex>
API
Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.
- -
Flex