How to disable inline of a Flexbox

Question

Code

<Box backgroundColor="#fdfdfd" p={6}>
    <Flex 
        justifyContent="center" 
        alignItems="center" 
        w="100%"
        mt={5}
    >
        <Heading textAlign="left" fontSize="1.5rem" mb={5} display="block">
            Những cán bộ của chúng tôi
        </Heading>
        {Data.map(userData => <UserInfo key={userData.id} data={userData} />)}
    </Flex>
</Box>

Web preview

image

Problem

The Heading is inline, but I don't want to be inline . Is there any way to disable it?

Edit

If I mode Heading above Flex then it will look like this image

Answer 1

That is due to the fact that the wrapper of the Heading component is a Flex box container. to make Heading sit on it own Row You should wrap it inside a Box element and set attribute w="100%" like this

<Flex  wrap="wrap">
    <Box w="100%">
        <Heading textAlign="left" fontSize="1.5rem" mb={5} display="block">
            Những cán bộ của chúng tôi
        </Heading>
    </Box>

    // here will go the {Data.map...}
    <Box>
</Flex>

As Box will be a flex item sitting at the same level as UserInfo which are return from the map function. It will take the entire horizontal space available and all other elements will go underneath It.

You should add wrap attribute to the Flex Component so as the box take 100% width available all other will go on a new line