React水平条形图组件Flex布局问题：中间条形无法左对齐

我正尝试为React组件设置样式以实现水平条形图效果，但无法将中间的条形div按预期左对齐。

React组件代码 #

import React from 'react'

const level3UnitItem = ({ item, ratio }) => {
    return (
        <div className='country-div' >
            <div className='name-div'> <h1>{item.country}</h1></div>
            <div style={{ width: `${ratio * 400}px`, backgroundColor: 'red' }} className='bar-div'>
            </div>
            <div className='number-div'><h1>{item.population.toLocaleString('en-US')}</h1></div>

        </div>
    )
}

export default level3UnitItem

对应CSS样式 #

.country-div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    margin: .2px;
}
.country-div h1, h2{
    font-size: small;
}

当前效果 #

预期效果 #

请求解决该Flex布局的对齐问题，使中间条形div能够左对齐。

问题根源是justify-content: space-between，这个属性会让三个子元素分别贴左、占满中间空隙、贴右，导致条形div和名字之间出现空白。按以下步骤修改即可实现预期效果：

1. 调整父容器Flex布局逻辑
   将.country-div的justify-content改为flex-start，同时添加align-items: center让元素垂直居中：

   .country-div{
       width: 100%;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       padding: 1rem;
       margin: .2px;
   }
   

2. 强制数字区域靠右
   给.number-div设置margin-left: auto，利用Flex布局特性让它自动贴到容器右侧：

   .number-div {
       margin-left: auto;
   }
   

3. 可选：优化名字区域对齐（可选）
   如果希望所有条形从同一水平位置开始，给.name-div设置固定宽度并禁止压缩：

   .name-div {
       width: 120px; /* 根据需求调整宽度 */
       flex-shrink: 0;
   }
   

修改后的完整CSS：

.country-div{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    margin: .2px;
}
.country-div h1, h2{
    font-size: small;
}
.name-div {
    width: 120px;
    flex-shrink: 0;
}
.number-div {
    margin-left: auto;
}

修改后，名字左对齐，条形紧跟在名字后方，数字自动靠右，完全匹配预期布局。

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