justify-content 不适用于脉轮 ui

Question

我正在使用 Next.js 和 Chakra-ui 开发一个网站。在这里，我试图将 ButtonGroup 对齐到末尾。为此，我正在尝试使用justifyContent="space-between"，但它不起作用。 这是卡片组件的代码

            <Flex direction="column" px={0} justifyContent="space-between">
                <Flex px={10} pt={10} direction="column" lineHeight="7" mb={5}>
                    <Heading size="sm">{data.name}</Heading>
                    <UnorderedList mt={5}>
                        {data.features.map((element, index) => (<ListItem key={index} fontSize="13px">{element}</ListItem>))}
                    </UnorderedList>
                </Flex>
                <ButtonGroup spacing="0">
                    <Button w="100%" m={0} borderRadius="0 0 0 20px" fontSize="14px">
                        Explore More
                    </Button>
                    <Button
                        w="100%"
                        color="white"
                        bg="#274E85"
                        m={0}
                        borderRadius="0 0 20px 0"
                        fontSize="14px"
                    >
                        Apply Now
                    </Button>
                </ButtonGroup>

            </Flex>

请有人帮我解决这个问题

Answer 1

您不应使用justifyContent，而应仅使用justify。