使用align-items:stretch时，保持同行flex项高度不随展开项变化

我明白你想要的效果：初始状态下同行的flex卡片保持等高（利用align-items: stretch），但当其中一个卡片里的折叠项展开时，其他卡片保持自身的初始高度，不再被拉伸。下面是具体的解决方案：

核心思路 #

初始时用align-items: stretch让同行卡片等高；当有折叠项展开时，动态修改flex容器的align-items属性为flex-start，这样其他卡片会保持自己的高度，只有展开的卡片会随内容增高；当所有折叠项都收起时，再把align-items改回stretch，恢复等高效果。

具体实现步骤 #

1. 给flex容器添加ID（方便JS操作） #

修改你的flex容器代码，加上ID以便后续JavaScript定位：

<div class="flex-container" id="flex-container">
  <!-- 你的.tile-rtiers卡片元素 -->
</div>

2. 编写jQuery监听折叠事件 #

利用Bootstrap折叠组件的show.bs.collapse和hide.bs.collapse事件，动态调整flex容器的样式：

$(document).ready(function() {
  // 监听折叠展开事件
  $('.collapse').on('show.bs.collapse', function() {
    $('#flex-container').css('align-items', 'flex-start');
  });

  // 监听折叠收起事件
  $('.collapse').on('hide.bs.collapse', function() {
    // 检查是否所有折叠项都已收起
    let allCollapsed = true;
    $('.collapse').each(function() {
      if ($(this).hasClass('show')) {
        allCollapsed = false;
        return false; // 跳出循环，无需继续检查
      }
    });

    // 如果全部收起，恢复等高效果
    if (allCollapsed) {
      $('#flex-container').css('align-items', 'stretch');
    }
  });
});

3. 可选：强化初始等高效果 #

如果你的卡片初始内容高度不一致，可以在页面加载时统一设置min-height，确保初始状态下严格等高：

$(document).ready(function() {
  // 初始化时计算最高卡片的高度，统一设置min-height
  let maxHeight = 0;
  $('.tile-rtiers').each(function() {
    const currentHeight = $(this).height();
    if (currentHeight > maxHeight) {
      maxHeight = currentHeight;
    }
  });
  $('.tile-rtiers').css('min-height', maxHeight + 'px');

  // 上面的折叠事件监听代码...
});

效果验证 #

• 页面加载完成时：所有同行卡片因align-items: stretch保持等高；
• 展开任意折叠项：flex容器切换为align-items: flex-start，其他卡片停留在初始高度，仅展开的卡片随内容增高；
• 收起所有折叠项：flex容器恢复align-items: stretch，卡片回到等高状态。

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