如何使用CSS根据“开卡建档”、“门诊充值”和“缴费”元素的有无来动态调整布局？

<div class="container">
  <div id="kaika" class="item">开卡建档</div>
  <div id="menzhen" class="item">门诊充值</div>
  <div id="jiaofei" class="item">缴费</div>
</div>

<style>
.container {
  display: flex;
  width: 100%;
}

.item {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  flex: 1; /* 默认占据可用空间 */
}

/*  根据JavaScript动态添加的类名来调整布局  */
.layout-1 { /* 所有元素存在 */
  flex-direction: row;
}
.layout-1 #kaika { flex: 1; }
.layout-1 #menzhen, .layout-1 #jiaofei { flex: 1; }

.layout-2 { /* 缺少“开卡建档” */
  flex-direction: row;
}
.layout-2 #menzhen, .layout-2 #jiaofei { flex: 1; }

.layout-3 { /* 缺少“门诊充值” */
  flex-direction: row;
}
.layout-3 #kaika { flex: 1; }
.layout-3 #jiaofei { flex: 1; }

.layout-4 { /* 缺少“缴费” */
  flex-direction: row;
}
.layout-4 #kaika { flex: 1; }
.layout-4 #menzhen { flex: 1; }

.layout-5 { /* 仅剩“开卡建档” */
  flex-direction: row;
}
.layout-5 #kaika { flex: 1; }

</style>

<script>
  const container = document.querySelector('.container');
  const kaika = document.getElementById('kaika');
  const menzhen = document.getElementById('menzhen');
  const jiaofei = document.getElementById('jiaofei');

  function adjustLayout() {
    let layoutClass = '';
    if (kaika.style.display !== 'none' && menzhen.style.display !== 'none' && jiaofei.style.display !== 'none') {
      layoutClass = 'layout-1';
    } else if (kaika.style.display === 'none') {
      layoutClass = 'layout-2';
    } else if (menzhen.style.display === 'none') {
      layoutClass = 'layout-3';
    } else if (jiaofei.style.display === 'none') {
      layoutClass = 'layout-4';
    } else {
      layoutClass = 'layout-5';
    }
    container.className = 'container ' + layoutClass;
  }

  //  初始布局调整
  adjustLayout();

  //  模拟元素显示/隐藏的事件处理 (可根据实际情况修改)
  kaika.addEventListener('click', () => { kaika.style.display = kaika.style.display === 'none' ? 'block' : 'none'; adjustLayout(); });
  menzhen.addEventListener('click', () => { menzhen.style.display = menzhen.style.display === 'none' ? 'block' : 'none'; adjustLayout(); });
  jiaofei.addEventListener('click', () => { jiaofei.style.display = jiaofei.style.display === 'none' ? 'block' : 'none'; adjustLayout(); });
</script>