Chakra UI双列布局HStack子元素无法顶部垂直对齐问题求助

问题复现 #

使用Chakra UI的HStack搭建双列布局时，期望所有子元素沿顶部对齐，实际运行时子元素默认垂直居中。原有代码如下：

<HStack verticalAlign='top' height='100%' position='relative' className='debug-blue'>
    <VStack spacing={2} width={marginSize} height={marginHeight} className='sidebar debug-red'>
        {listWallets()}
    </VStack>

    <VStack align='flex-start' alignItems='flex-start' verticalAlign='top' >
        {/* {showPieces()} */}
        {dummyBlocks()}
    </VStack>
</HStack>

问题原因 #

Chakra UI的HStack组件底层是Flex横向布局，控制子元素垂直对齐方向的属性是align，默认值为center，这是导致所有子项垂直居中的核心原因。原有代码中给HStack设置的verticalAlign属性仅对行内元素生效，对Flex布局容器无效；给子VStack设置的垂直对齐属性无法覆盖父容器的对齐规则，因此不生效。

正确修改方法 #

1. 给外层HStack添加align='flex-start'属性，直接控制所有子元素沿容器顶部对齐，移除无效的verticalAlign='top'属性
2. 清理右侧VStack的冗余属性：移除无效的verticalAlign='top'，同时align和alignItems功能重复，保留align='flex-start'即可

修正后代码 #

<HStack align='flex-start' height='100%' position='relative' className='debug-blue'>
    <VStack spacing={2} width={marginSize} height={marginHeight} className='sidebar debug-red'>
        {listWallets()}
    </VStack>

    <VStack align='flex-start'>
        {/* {showPieces()} */}
        {dummyBlocks()}
    </VStack>
</HStack>

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