如何禁用 Flexbox 的內聯

Question

代碼

<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 預覽

圖片

問題

Heading是 inline ，但我不想成為inline 。 有沒有辦法禁用它？

編輯

如果我在Flex上方設置Heading ，那么它看起來像這個圖像

Answer 1

這是因為Heading組件的包裝器是一個Flex盒子容器。 使Heading位於它自己的Row您應該將它包裝在Box元素中並像這樣設置屬性w="100%"

<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>

因為Box將是一個與UserInfo處於同一級別的flex item ，它是從map function 返回的。 它將占用整個可用的水平空間，所有其他元素將 go 在它下面。

您應該將wrap屬性添加到Flex組件，以便該框采用100%寬度可用，所有其他將 go 在新行上