javascript - 如何禁用 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>

网页预览

图片

问题

是内联的Heading，但我不想成为inline. 有没有办法禁用它？

编辑

如果我Heading在上面模式，Flex那么它将看起来像这个 图像

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从函数返回flex item的位置相同。它将占用整个可用的水平空间，所有其他元素都将位于它的下方。UserInfomap

您应该wrap向组件添加属性，Flex以便框采用100%可用的宽度，所有其他的都将换行