'justify-content is not applying in chakra ui

I'm developing a Website using Next.js and Chakra-ui. Here I'm tring to align the ButtonGroup to the end. For that I'm trying to use justifyContent="space-between" but itsnt working. Here is the code for the Card Components

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

Please Someone help me solve this enter image description here

reactjsflexboxnext.jschakra-ui


Solution 1:[1]

You should not use justifyContent, but instead, you should only use justify.

Solution 2:[2]

i will suggest if space between is not working in chakra ui then u can apply it manually.. like just give it classname and do manually

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2 Swapnil Kumar

Related Questions