如何禁用 Flexbox 的内联

【问题标题】：How to disable inline of a Flexbox如何禁用 Flexbox 的内联
【发布时间】：2021-06-06 09:58:32
【问题描述】：

代码

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

网页预览

image

问题

Heading 是内联的，但我不想成为 inline。有什么办法可以关闭吗？

编辑

如果我在Flex 上方模式Heading 那么它看起来像这样 image

【问题讨论】：

这是因为你必须定义 flex-direction:column。这将保留您的弹性项目（像您需要的不同行中的孩子。

标签： javascript reactjs chakra-ui

【解决方案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 函数返回的。它将占用整个可用的水平空间，所有其他元素都将位于它的下方。

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

【讨论】：