如何在flexbox容器收缩时移除子项？仿YouTube窗口收缩元素移除效果

要实现类似YouTube的效果——当flex容器收缩时直接移除子项而非换行，可通过以下两种方案实现：

方法一：CSS媒体查询（固定断点场景） #

适合提前确定屏幕宽度断点的情况，直接在指定宽度下隐藏子项：

1. 基础Flex布局设置

.flex-container {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap; /* 强制子项保持一行，禁止换行 */
  overflow: hidden; /* 避免子项溢出容器 */
}

.flex-item {
  flex: 1 1 auto; /* 子项可伸缩 */
  min-width: 200px; /* 定义子项最小宽度，防止被过度压缩 */
}

2. 添加媒体查询断点

/* 视口宽度小于800px时，隐藏最后一个子项 */
@media (max-width: 800px) {
  .flex-item:last-child {
    display: none;
  }
}

/* 视口宽度小于600px时，再隐藏倒数第二个子项 */
@media (max-width: 600px) {
  .flex-item:nth-last-child(2) {
    display: none;
  }
}

方法二：JavaScript动态检测（自适应容器宽度） #

如果需要根据容器实时宽度动态调整子项显示（而非固定视口断点），可结合JS监听容器尺寸变化：

1. 基础CSS布局

.flex-container {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  overflow: hidden;
}

.flex-item {
  flex: 1 1 200px; /* 子项基础宽度200px，支持伸缩 */
}

2. 动态检测逻辑

const container = document.querySelector('.flex-container');
const items = Array.from(container.children);

// 检查并调整子项显示状态的核心函数
function adjustItemVisibility() {
  const containerWidth = container.offsetWidth;
  const gap = parseInt(getComputedStyle(container).gap);
  
  // 计算所有可见子项的最小总宽度（含间隙）
  let totalMinWidth = items.reduce((sum, item) => {
    if (item.style.display !== 'none') {
      return sum + parseInt(getComputedStyle(item).minWidth) + gap;
    }
    return sum;
  }, 0) - gap; // 最后一个子项无需额外加间隙

  // 容器宽度不足时，移除最后一个可见子项
  while (containerWidth < totalMinWidth && items.some(item => item.style.display !== 'none')) {
    const lastVisible = items.findLast(item => item.style.display !== 'none');
    lastVisible.style.display = 'none';
    totalMinWidth -= parseInt(getComputedStyle(lastVisible).minWidth) + gap;
  }

  // 容器宽度足够时，恢复被隐藏的子项（可选逻辑）
  while (containerWidth >= totalMinWidth && items.some(item => item.style.display === 'none')) {
    const firstHidden = items.find(item => item.style.display === 'none');
    firstHidden.style.display = 'flex';
    totalMinWidth += parseInt(getComputedStyle(firstHidden).minWidth) + gap;
  }
}

// 初始化执行
adjustItemVisibility();
// 监听窗口大小变化
window.addEventListener('resize', adjustItemVisibility);
// 监听容器自身尺寸变化（比如父容器动态调整宽度）
const resizeObserver = new ResizeObserver(adjustItemVisibility);
resizeObserver.observe(container);

核心注意事项 #

• 必须设置flex-wrap: nowrap，强制子项保持一行，避免自动换行
• 给子项定义min-width，防止子项被无限压缩至消失（除非主动隐藏）
• 使用display: none移除子项，确保其不占用布局空间，避免下方容器移位

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