求助：Tauri应用中display:flex无法实现div水平对齐

我在开发Tauri应用时遇到布局问题：用于承载按钮的容器，里面的按钮div始终垂直排列，明明给容器加了display:flex却没效果。

原代码 #

JavaScript代码

function create_disk_buton(disk) {

  console.log(disk)
  const box_container = document.getElementById('disk-button-container');
  
  let disk_button_html = 
  `<div id="${(disk.name + '_view')}" class="disk-button">
      <img src="./assets/disque-dur-externe.png" width="50" height="50">
      <span>
        <p>${disk.name}</p>
        <p>${disk.available_space}</p>
      </span>
  </div>`;

  box_container.innerHTML += disk_button_html;
  document.getElementById((disk.name + '_view')).addEventListener("click", hi)
}

// 调用后端暴露的disk_list()函数
async function refresh_disk_list(){
  let disk_list;
  invoke('disk_list').then((result) => {

    for (let raw_disk in result) {
      if (raw_disk != undefined) {
        raw_disk = result[raw_disk].split(" ")
        let disk = {};
        disk.name = raw_disk[0]
        disk.used_space = raw_disk[1]
        disk.max_size = raw_disk[3]
        disk.available_space = raw_disk[4]

        create_disk_buton(disk)
      }

    }
  });
  
}

CSS代码

.disk-button-container {
  display: flex;
}

.disk-button {
  max-width: 200px;
  border: 2px solid #c7c7c7;
  border-radius: 8px;
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px; /* 添加底部边距分隔多行按钮 */
  align-items: center;
  display: flex;
}

.disk-button img {
  vertical-align: middle;
  margin-right: 10px;
}

.disk-button span {
  flex-grow: 1;
}

问题原因 #

容器元素的ID是disk-button-container，但CSS中使用的是类选择器（.disk-button-container），导致flex样式从未应用到容器上。块级元素默认垂直排列，所以按钮不会水平布局。

修复方案 #

修改CSS中的容器选择器，将类选择器改为ID选择器，同时建议添加flex-wrap: wrap让按钮在空间不足时自动换行：

#disk-button-container {
  display: flex;
  flex-wrap: wrap; /* 可选，适配小屏幕 */
}

额外优化建议 #

1. 避免使用innerHTML +=拼接DOM，改用insertAdjacentHTML减少DOM重绘，同时避免重复绑定事件的潜在问题：

// 替换 box_container.innerHTML += disk_button_html;
box_container.insertAdjacentHTML('beforeend', disk_button_html);

2. for...in遍历对象可能会遍历到原型链上的属性，建议用Object.values(result)遍历值：

// 替换原for循环
Object.values(result).forEach(rawDiskStr => {
  if (!rawDiskStr) return;
  const raw_disk = rawDiskStr.split(" ");
  const disk = {
    name: raw_disk[0],
    used_space: raw_disk[1],
    max_size: raw_disk[3],
    available_space: raw_disk[4]
  };
  create_disk_buton(disk);
});

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