React+Chakra UI中form标签破坏布局，需实现组件横向排列

问题原因 #

原生<form>是块级元素，内部元素默认垂直排列；直接给form添加行内flexDirection: row时，内部的FormControl默认会撑满父容器宽度，导致按钮被挤到下方，无法实现横向排列。

解决方案 #

提供两种简洁的修复方式：

方式1：给<form>添加Chakra UI的Flex属性 #

Chakra UI支持给原生HTML标签直接传入样式props，直接把form转为flex容器并分配内部空间：

<Flex id='Send section' borderColor='gray.200' width='100%' height='20%' padding='20px'>
    <form 
        onSubmit={handleSubmit(onSubmit)}
        display='flex'
        width='100%'
        gap='1dvh'
    >
        <FormControl isInvalid={Boolean(errors.text)} flex='1'>
            <Textarea 
                borderRadius='10px' 
                height='100%'
                {...register('text', textValidator)}
            />
            {errors.text && <FormErrorMessage>{errors.text.message}</FormErrorMessage>}
        </FormControl>
        <Flex flexDir='column' justifyContent='end'>
            <IconButton
                borderRadius='10px'
                variant='outline'
                colorScheme='blue'
                aria-label='Attach files'
                mb='1dvh'
                icon={<BiPaperclip />}
            />
            <IconButton
                type="submit"
                borderRadius='10px'
                variant='outline'
                colorScheme='blue'
                aria-label='Send message'
                icon={<BiSend />}
            />
        </Flex>
    </form>
</Flex>

关键改动：

• 给<form>加display='flex'和width='100%'，让它成为flex容器
• 给<FormControl>设置flex='1'，让它占据form内剩余的所有横向空间
• 用gap='1dvh'替代按钮的ml='1dvh'，统一控制元素间距

方式2：用Chakra的<Flex>组件包裹form内部元素 #

让form只负责提交逻辑，布局完全交给Chakra组件处理：

<Flex id='Send section' borderColor='gray.200' width='100%' height='20%' padding='20px'>
    <form onSubmit={handleSubmit(onSubmit)}>
        <Flex width='100%' gap='1dvh'>
            <FormControl isInvalid={Boolean(errors.text)} flex='1'>
                <Textarea 
                    borderRadius='10px' 
                    height='100%'
                    {...register('text', textValidator)}
                />
                {errors.text && <FormErrorMessage>{errors.text.message}</FormErrorMessage>}
            </FormControl>
            <Flex flexDir='column' justifyContent='end'>
                <IconButton
                    borderRadius='10px'
                    variant='outline'
                    colorScheme='blue'
                    aria-label='Attach files'
                    mb='1dvh'
                    icon={<BiPaperclip />}
                />
                <IconButton
                    type="submit"
                    borderRadius='10px'
                    variant='outline'
                    colorScheme='blue'
                    aria-label='Send message'
                    icon={<BiSend />}
                />
            </Flex>
        </Flex>
    </form>
</Flex>

为什么之前的行内样式无效？ #

直接设置style={{flexDirection: 'row'}}时，虽然form变成了flex容器，但<FormControl>默认是块级元素，宽度会自动撑满父容器，导致按钮没有横向空间只能换行。加上flex='1'后，FormControl会遵循flex规则分配空间，按钮就能保持在右侧。

内容的提问来源于stack exchange，提问作者UserAbuser