Flex is a Box with display: flex. Use Box for flexbox items. Visit CSS Tricks' guide to Flexbox to learn more on how to use flexbox.

Basic Example

Using flexbox to vertically center text.

 
Hi, I'm centered vertically with flexbox align-items!
 
<Flex backgroundColor="grey.0" alignItems="center" width="100%" height="100px">
    Hi, I'm centered vertically with flexbox align-items!
</Flex>
<Flex backgroundColor="grey.0" alignItems="center" width="100%" height="100px">
    Hi, I'm centered vertically with flexbox align-items!
</Flex>

More complex example

Here, we make mulitple equally sized columns (or flexbox items) with an image on the most right column. We use Box as flexbox items since their display property isnt default flex.

 
1
2
3
4
5
 
<Flex flexDirection="row" flexWrap="wrap">
    <Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        1
    </Box>
    <Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        2
    </Box>
    <Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        3
    </Box><Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        4
    </Box>
    <Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        5
    </Box>
    <Box flex={1} order={2}>
        <Box minWidth="100px" maxWidth="200px" m="0 auto">
            <img src="/homepage/bridge-web-landing.svg" alt="bridge hero" width="100%" />
        </Box>
    </Box>
</Flex>
<Flex flexDirection="row" flexWrap="wrap">
    <Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        1
    </Box>
    <Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        2
    </Box>
    <Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        3
    </Box><Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        4
    </Box>
    <Box m='0 20px 0 0' p='10px' bg="blue.1" flex={1} order={1}>
        5
    </Box>
    <Box flex={1} order={2}>
        <Box minWidth="100px" maxWidth="200px" m="0 auto">
            <img src="/homepage/bridge-web-landing.svg" alt="bridge hero" width="100%" />
        </Box>
    </Box>
</Flex>

Common Props

Flex includes COMMON, FLEX, and BORDER props. Read Common Props for details and API. These common props will override component props such as the color.

Component Props