侧边栏折叠时如何将容器内div从水平排列切换为垂直排列

先给容器绑定与展开状态对应的动态类，修改你的DOM结构如下：

<!-- React项目请将class替换为className -->
<div id='batteryContainer' class={this.expanded ? 'expanded' : 'collapsed'}>
  <div id='batteryText'>
     {this.expanded && 'Battery: ' + this.batteryCharge + '%'}
     {!this.expanded && this.batteryCharge + '%'}
  </div>
  <div id='batterySvg'>
     <SvgIcon
        component={batterySvgIcon}
        viewBox={'0 0 y z'}
     />
  </div>
</div>

替换原有CSS为以下内容：

/* 容器公共样式 */
#batteryContainer{    
    position: absolute;    
    bottom: 50px;
    display: flex;
    padding: 4px 8px;
    box-sizing: border-box;
    max-width: 100%;
}

/* 文本公共样式 */
#batteryText{
    white-space: nowrap;
}

/* 图标容器公共样式 */
#batterySvg{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 展开状态样式 */
#batteryContainer.expanded {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* 收起状态样式 */
#batteryContainer.collapsed {
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
#batteryContainer.collapsed #batteryText {
    font-size: 12px;
}

代码说明：

• 展开状态下flex横向排列配合align-items: center可自动实现文本与电池图标垂直对齐，gap属性控制两者间距，内容不会溢出侧边栏
• 收起状态下切换为flex纵向排列，文本自然显示在图标上方，align-items: center实现两者水平居中对齐
• 可根据实际设计需求调整间距、字体大小、内边距等参数，若存在细微对齐偏差可给对应元素加margin微调即可

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